Finding the complete list of dates within a range using JavaScript/React

Question

Finding the complete list of dates within a range using JavaScript/React

I am trying to find the number of days between two dates.

For instance, if the start date is 02/20/2020 and the end date is 01/03/2020, I want to display the result like:

Feb 20 Thursday, Feb 21 Friday,..., Jan 3 Monday.

I have searched for a solution on StackOverflow, but unfortunately, I did not find one that met my expectations.

Can someone please help me achieve this using JavaScript or React?

javascript html jquery css date

Answer 1

Answer №1

To find the difference between two dates, you can create an array of dates in the desired format:

const startDate = new Date('02/20/2020'),
      endDate = new Date('03/01/2020'),
      difference = (endDate - startDate) / 864e5,
      dateFormat = {weekday:'long', month:'short', day:'numeric'},
      datesArray = Array.from(
        {length: difference + 1},
        (_, index) => {
          const currentDate = new Date();
          currentDate.setDate(startDate.getDate() + index);
          const [weekdayString, dateString] = currentDate.toLocaleDateString('en-US', dateFormat).split(', ');
          return `${dateString} ${weekdayString}`;
        }
      )
      
console.log(datesArray)

.as-console-wrapper {min-height:100%;}

For a fun diversion, here's a React implementation:

const { render } = ReactDOM,
      { useState } = React;
      
const DatePicker = ({ min, max, onPick }) => (
  <input 
    type="date" 
    onChange={onPick}
    {...{min,max}}
  />
);  

const ListOfDates = ({ startDate, endDate }) => {
    const firstDate = new Date(startDate),
          lastDate = new Date(endDate),
          difference = (lastDate - firstDate) / 864e5,
          dateFormat = { weekday: 'long', month: 'short', day: 'numeric' },
          datesList = Array.from(
            { length: difference + 1 },
            (_, index) => {
              const date = new Date(); 
              date.setDate(firstDate.getDate() + index); 
              const [weekdayStr, dateStr] = date.toLocaleDateString('en-US', dateFormat).split(', '); 
              return `${dateStr} ${weekdayStr}`; 
            }
          );
     return (
        <ul>
          {datesList.map((dateItem, key) => <li key={key}>{dateItem}</li>)}
        </ul>
     );
};

const App = () => {
  const [start, setStart] = useState(''),
        [end, setEnd] = useState(''),
        chooseStartDate = ({ target: { value } }) => setStart(value),
        chooseEndDate = ({ target: { value } }) => setEnd(value);
  return <>
    <DatePicker max={end} onPick={chooseStartDate} />
    <DatePicker min={start} onPick={chooseEndDate} />
    <ListOfDates startDate={start} endDate={end} />
  </>
};

render (
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

And here's how it can be done with jQuery:

$(document).ready(() => {
  $('.datepick').on('change', function(){
    $(this).attr('id') == 'startDate' ?
    $('#endDate').attr('min', $(this).val()) :
    $('#startDate').attr('max', $(this).val());
    if ($('#startDate').length && $('#endDate').length) {
      const initialDate = new Date($('#startDate').val()),
            finalDate = new Date($('#endDate').val()),
            daysDifference = (finalDate - initialDate) / 864e5,
            format = { weekday: 'long', month: 'short', day: 'numeric' },
            datesArray = Array.from(
              { length: daysDifference + 1 },
              (_, index) => {
                const currentDate = new Date(); 
                currentDate.setDate(initialDate.getDate() + index); 
                const [dayOfWeek, specificDate] = currentDate.toLocaleDateString('en-US', format).split(', '); 
                return `${specificDate} ${dayOfWeek}`; 
              }
            ),
            dateItems = datesArray.map(date => `<li>${date}</li>`); 
            $('#dateList').html(dateItems)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Start Date: <input id="startDate" type="date" class="datepick"></input></label>
<label>End Date: <input id="endDate" type="date" class="datepick"></input></label>
<ul id="dateList"></ul>

Answer 2

To find the difference between two dates, you can create an array of dates in the desired format:

const startDate = new Date('02/20/2020'),
      endDate = new Date('03/01/2020'),
      difference = (endDate - startDate) / 864e5,
      dateFormat = {weekday:'long', month:'short', day:'numeric'},
      datesArray = Array.from(
        {length: difference + 1},
        (_, index) => {
          const currentDate = new Date();
          currentDate.setDate(startDate.getDate() + index);
          const [weekdayString, dateString] = currentDate.toLocaleDateString('en-US', dateFormat).split(', ');
          return `${dateString} ${weekdayString}`;
        }
      )
      
console.log(datesArray)

.as-console-wrapper {min-height:100%;}

For a fun diversion, here's a React implementation:

const { render } = ReactDOM,
      { useState } = React;
      
const DatePicker = ({ min, max, onPick }) => (
  <input 
    type="date" 
    onChange={onPick}
    {...{min,max}}
  />
);  

const ListOfDates = ({ startDate, endDate }) => {
    const firstDate = new Date(startDate),
          lastDate = new Date(endDate),
          difference = (lastDate - firstDate) / 864e5,
          dateFormat = { weekday: 'long', month: 'short', day: 'numeric' },
          datesList = Array.from(
            { length: difference + 1 },
            (_, index) => {
              const date = new Date(); 
              date.setDate(firstDate.getDate() + index); 
              const [weekdayStr, dateStr] = date.toLocaleDateString('en-US', dateFormat).split(', '); 
              return `${dateStr} ${weekdayStr}`; 
            }
          );
     return (
        <ul>
          {datesList.map((dateItem, key) => <li key={key}>{dateItem}</li>)}
        </ul>
     );
};

const App = () => {
  const [start, setStart] = useState(''),
        [end, setEnd] = useState(''),
        chooseStartDate = ({ target: { value } }) => setStart(value),
        chooseEndDate = ({ target: { value } }) => setEnd(value);
  return <>
    <DatePicker max={end} onPick={chooseStartDate} />
    <DatePicker min={start} onPick={chooseEndDate} />
    <ListOfDates startDate={start} endDate={end} />
  </>
};

render (
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

And here's how it can be done with jQuery:

$(document).ready(() => {
  $('.datepick').on('change', function(){
    $(this).attr('id') == 'startDate' ?
    $('#endDate').attr('min', $(this).val()) :
    $('#startDate').attr('max', $(this).val());
    if ($('#startDate').length && $('#endDate').length) {
      const initialDate = new Date($('#startDate').val()),
            finalDate = new Date($('#endDate').val()),
            daysDifference = (finalDate - initialDate) / 864e5,
            format = { weekday: 'long', month: 'short', day: 'numeric' },
            datesArray = Array.from(
              { length: daysDifference + 1 },
              (_, index) => {
                const currentDate = new Date(); 
                currentDate.setDate(initialDate.getDate() + index); 
                const [dayOfWeek, specificDate] = currentDate.toLocaleDateString('en-US', format).split(', '); 
                return `${specificDate} ${dayOfWeek}`; 
              }
            ),
            dateItems = datesArray.map(date => `<li>${date}</li>`); 
            $('#dateList').html(dateItems)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Start Date: <input id="startDate" type="date" class="datepick"></input></label>
<label>End Date: <input id="endDate" type="date" class="datepick"></input></label>
<ul id="dateList"></ul>

Answer 3

Answer №2

One way to achieve this is by utilizing the momentjs library:


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//let moment = require("moment");

let date = [];

let startDate = "02/20/2020";
let endDate = "01/03/2020";
while ( moment(startDate, "MM/DD/YYYY").valueOf() <= moment(endDate, "DD/MM/YYYY").valueOf()) {
  date.push(moment(startDate, "MM/DD/YYYY").format("MMM DD dddd"));
  startDate = moment(startDate, "MM/DD/YYYY").add(1, "days").format("MM/DD/YYYY");
}
console.log(date);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Answer 4

One way to achieve this is by utilizing the momentjs library:


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//let moment = require("moment");

let date = [];

let startDate = "02/20/2020";
let endDate = "01/03/2020";
while ( moment(startDate, "MM/DD/YYYY").valueOf() <= moment(endDate, "DD/MM/YYYY").valueOf()) {
  date.push(moment(startDate, "MM/DD/YYYY").format("MMM DD dddd"));
  startDate = moment(startDate, "MM/DD/YYYY").add(1, "days").format("MM/DD/YYYY");
}
console.log(date);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Answer 5

Answer №3

To begin, create two date objects representing the start and end dates. Calculate the number of days between these dates and iterate through that range to print each date.

Here's a sample code snippet for a React component:

const App = () => {
  const [dates, setDates] = React.useState([]);

  React.useEffect(() => {
    const start = new Date('02/20/2020');
    const end = new Date('03/01/2020');

    const daysBetween = (end.getTime() - start.getTime()) / (1000 * 3600 * 24);
    const arr = [];

    for (let i = 0; i <= daysBetween; i++) {
      const temp = new Date();
      temp.setDate(start.getDate() + i)
      arr.push(temp);
    }
    
    setDates(arr);
  }, []);
  
  return (
    <ul>
      {dates.map(date => (
        <li key={date}>
          {date.toLocaleDateString(
            "en-US",
            {month: "short", day: "2-digit", weekday: "long"}
          )}
        </li>
      ))}
    </ul>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 6

To begin, create two date objects representing the start and end dates. Calculate the number of days between these dates and iterate through that range to print each date.

Here's a sample code snippet for a React component:

const App = () => {
  const [dates, setDates] = React.useState([]);

  React.useEffect(() => {
    const start = new Date('02/20/2020');
    const end = new Date('03/01/2020');

    const daysBetween = (end.getTime() - start.getTime()) / (1000 * 3600 * 24);
    const arr = [];

    for (let i = 0; i <= daysBetween; i++) {
      const temp = new Date();
      temp.setDate(start.getDate() + i)
      arr.push(temp);
    }
    
    setDates(arr);
  }, []);
  
  return (
    <ul>
      {dates.map(date => (
        <li key={date}>
          {date.toLocaleDateString(
            "en-US",
            {month: "short", day: "2-digit", weekday: "long"}
          )}
        </li>
      ))}
    </ul>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 7

Answer №4

To find the difference in days from the given date, one can calculate the number of days and then use a loop to log each day incrementally between the start and end dates using toLocaleString().

const startDate = "02/20/2020";
const endDate = "03/01/2020";

const diffTime = Math.abs(new Date(endDate) - new Date(startDate));
const diffDays = 0|diffTime/864e5; 


for(let i = 0; i <= diffDays; i++){
  const newdate = new Date(new Date(startDate).getTime()+(i*864e5));
  console.log(newdate.toLocaleString('en-us', { day:'2-digit', month: 'short', weekday:'long'}))
}

Answer 8

To find the difference in days from the given date, one can calculate the number of days and then use a loop to log each day incrementally between the start and end dates using toLocaleString().

const startDate = "02/20/2020";
const endDate = "03/01/2020";

const diffTime = Math.abs(new Date(endDate) - new Date(startDate));
const diffDays = 0|diffTime/864e5; 


for(let i = 0; i <= diffDays; i++){
  const newdate = new Date(new Date(startDate).getTime()+(i*864e5));
  console.log(newdate.toLocaleString('en-us', { day:'2-digit', month: 'short', weekday:'long'}))
}

Answer 9

Answer №5

If you're looking for another way to find the difference between two dates using JavaScript, try this method:

const startDate = new Date("06/30/2019"); 
const endDate = new Date("07/30/2019"); 

// Calculate the time difference between the two dates 
const timeDifference = endDate.getTime() - startDate.getTime(); 

// Calculate the number of days between the dates 
const numberOfDays = timeDifference / (1000 * 3600 * 24); 

while (numberOfDays !== 0) {
    let date = new Date(endDate);
    date.setDate(date.getDate() - numberOfDays);
    console.log(date);
    numberOfDays--;
}

Answer 10

If you're looking for another way to find the difference between two dates using JavaScript, try this method:

const startDate = new Date("06/30/2019"); 
const endDate = new Date("07/30/2019"); 

// Calculate the time difference between the two dates 
const timeDifference = endDate.getTime() - startDate.getTime(); 

// Calculate the number of days between the dates 
const numberOfDays = timeDifference / (1000 * 3600 * 24); 

while (numberOfDays !== 0) {
    let date = new Date(endDate);
    date.setDate(date.getDate() - numberOfDays);
    console.log(date);
    numberOfDays--;
}

Finding the complete list of dates within a range using JavaScript/React

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

Uploading Files in HTML

Organize array by "categories" in Javascript and preserve the original sequence

Tips on showing a success notification following form submission in HTML

Error Timeout Encountered by Langchain UnstructuredDirectoryLoader

Remove any javascript code from the ajax modal when it is closed or hidden

Is it necessary for an element in BEM to be contained within a block?

How can jQuery be referenced?

Is it possible to make an element draggable after it has been prep

Enhancing table field functionality in Backbone.js

Choose the Enum in a dynamic manner

Why is the value of the form's select element always null in jQuery?

Looking to include a new item into an array with the help of AngularJS

Setting a variable within an ng-repeat using ng-click

Ways to activate a special function after clicking a social media button?

Failure to register Express Route

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

The ngModel controller did not trigger the $$updateEventHandler function

Developing a dynamic slideshow using jQuery

Deleting a script from a database using jQuery AJAX