如何使用javascript/react获取两个日期之间的所有日期？

Question

我的需求是获取两个日期之间的天数。

例如，起始日期是02/20/2020至01/03/2020。我想要显示结果如下：

Feb 20 Thursday, Feb 21 Friday,....01 Mar Monday.

我在StackOverflow上看到了这种情况，但是没有得到预期的解决方案。请问有谁能够指导我如何用JavaScript或React实现这种情况？

- John_ny

---

我已重新打开此问题，因为 OP 想要打印起始日期和结束日期之间的所有完整日期。重复的目标只显示了如何获取两个日期之间的天数，而没有说明如何打印它们中的每一个。 - Chris

@John_ny 这个链接可以帮到你：https://dev59.com/bG855IYBdhLWcg3wUSgW - joy08

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>

- Yevhen Horbunkov

---

我想要获取各个日期的天数。 - John_ny

玩得开心吗？:-D - Chris

@YevgenGorbunkov 噢，我想我在你之后大约1分钟提交了我的答案，所以是的，既然OP问了关于js或react的问题，我想我会做点不同的事情。 :) - Chris

Answer 2

你可以使用 momentjs 来获取结果：

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<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

你可以首先创建两个日期对象，一个表示开始日期，另一个表示结束日期。然后，找出这些日期之间有多少天。最后，您可以循环这个数字，获取当前日期加上循环中的当前索引，并打印出来。

作为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>

- Chris

Answer 4

从给定的日期开始，计算出相差的天数，然后根据天数进行循环，并使用 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'}))
}

- Maniraj Murugan

---

不需要使用 Math.ceil()（可以使用 const diffDays = 0|diffTime/864e5 来代替，只要你的目的是为了发布更短的方式），因为生成的时间戳默认情况下可以被 (10006060*24) 整除。 - Yevhen Horbunkov

@YevgenGorbunkov，感谢您指出，已更新答案。 - Maniraj Murugan

非常欢迎，还有另一种方法可以尝试——你的日期字符串格式与要求的略有不同（请参考原帖了解详情）。 - Yevhen Horbunkov

顺便说一下，你可以用相同的方式缩短(i*24*60*60*1000)为i*864e5。 - Yevhen Horbunkov

Answer 5

在 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--
}

- Chukwuemeka Maduekwe

---

你的答案并没有按照 OP 的格式返回预期结果（日期字符串数组）。此外，你可以直接减去 date2 和 date1（不需要使用 .getTime()），然后乘以 1000*3600*24=864e5 来获得上述结果。 - Yevhen Horbunkov