Как получить полные даты между двумя датами, используя javascript / реагировать?

Question

Мое требование - получить количество дней между двумя датами.

Например, дата начала от 02/20/2020 до 01/03/2020 Я хотел бы отобразить результаты, например

20 февраля четверг, 21 февраля пятница, .... 01 Март понедельник.

Я прошел через этот сценарий в StackOverflow, но не получил ожидаемое решение для него.

Может кто-нибудь подсказать, как добиться этого сценария, используя javascript или отреагировать?

Answer 1

Вы можете рассчитать разницу между датами, после чего составить желаемый массив дат, приведенных к строке даты необходимого формата:

const d1 = new Date('02/20/2020'),
      d2 = new Date('03/01/2020'),
      diff = (d2-d1)/864e5,
      dateFormat = {weekday:'long',month:'short',day:'numeric'},
      dates = Array.from(
        {length: diff+1},
        (_,i) => {
          const date = new Date() 
          date.setDate(d1.getDate()+i) 
          const [weekdayStr, dateStr] = date.toLocaleDateString('en-US',dateFormat).split(', ')
          return `${dateStr} ${weekdayStr}`
        }
      )
      
console.log(dates)

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

Или, пока нам здесь весело :) Ниже приведена реализация React:

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

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

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

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>

... и 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 d1 = new Date($('#startDate').val()),
            d2 = new Date($('#endDate').val()),
            diff = (d2-d1)/864e5,
            dateFormat = {weekday:'long',month:'short',day:'numeric'},
            dates = Array.from(
              {length: diff+1},
              (_,i) => {
                const date = new Date() 
                date.setDate(d1.getDate()+i) 
                const [weekdayStr, dateStr] = date.toLocaleDateString('en-US',dateFormat).split(', ')
                return `${dateStr} ${weekdayStr}`
              }
            ),
            dateListItems = dates.map(d => `<li>${d}</li>`)
      $('#dateList').html(dateListItems)
    }
  })
        
})

<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

Вы можете использовать momentjs для получения результата:

<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 3

Начиная с указанной даты, найдите разницу в днях, затем, основываясь на количестве дней, введите al oop и запишите каждый день приращения между ними, используя 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 4

Другой способ получить разницу между двумя датами в JavaScript:

const d1 = new Date("06/30/2019"); 
const d2 = new Date("07/30/2019"); 

// To calculate the time difference of two dates 
const timeDiff = d2.getTime() - d1.getTime(); 

// To calculate the no. of days between two dates 
const days = timeDiff / (1000 * 3600 * 24); 

//to list the days
while (days !== 0) {
    let date = new Date(d2)
    date.setDate(date.getDate() - days)
    console.log(date)
    days--
}

Answer 5

Сначала вы можете создать два объекта даты, один для даты начала и другой для даты окончания. Затем выясните, сколько дней проходит между этими датами. Наконец, вы можете l oop через это число и получить текущую дату плюс текущий индекс в l oop и распечатать его.

Как компонент React:

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>