如何比较输入中的两个日期？答案

【问题标题】：How to compare two dates from input?如何比较输入中的两个日期？
【发布时间】：2017-04-10 17:28:52
【问题描述】：

有两个输入

From:   <input id="from" type="date" placeholder="dd/mm/yy"><br>
To:   <input id="to" type="date" placeholder="dd/mm/yy">

我想比较这两个输入，以确保退房日期不早于入住日期。但如何比较？谢谢

【问题讨论】：

html5 日期输入应该并且应该始终采用yyyy-MM-dd 的格式如果您尝试设置一个具有dd/mm/yy 格式的输入值的值，那么您将得到一个无效值。只是想你应该改变你的占位符......
@Endless — 并非所有实现都支持日期输入。

标签： javascript html css date

【解决方案1】：

我会这样做

HTML

<script>
    function compareDates() {
        //Get the text in the elements
        var from = document.getElementById('from').textContent;
        var to = document.getElementById('to').textContent;

        //Generate an array where the first element is the year, second is month and third is day
        var splitFrom = from.split('/');
        var splitTo = to.split('/');

        //Create a date object from the arrays
        var fromDate = Date.parse(splitFrom[0], splitFrom[1] - 1, splitFrom[2]);
        var toDate = Date.parse(splitTo[0], splitTo[1] - 1, splitTo[2]);

        //Return the result of the comparison
        return fromDate < toDate;
    }
</script>

<input id="from" type="date" placeholder="dd/mm/yy"><br>
<input id="to" type="date" placeholder="dd/mm/yy">
<button onclick="compareDates()">Compare</button>

让我知道你过得怎么样。

【讨论】：

这里有一些错误：Date.parse不是构造函数，只接受一个参数，new Date.parse(...)应该是new Date(…)。此外，月份索引为零，因此new Date(splitFrom[0], splitFrom[1] - 1, splitFrom[2])。答案应该解释问题以及如何解决它，而不仅仅是发布代码。

【解决方案2】：

如果您希望您的日期格式为 dd/mm/yy，您可以使用以下函数将字符串转换为日期：

function compareDate(str){
 // str format should be dd/mm/yyyy. Separator can be anything e.g. / or -. It wont effect
 var dt   = parseInt(str.substring(0,2));
 var mon  = parseInt(str.substring(3,5));
 var yr   = parseInt(str.substring(6,10));
 var date = new Date(yr, mon-1, dt);
 return date;
}

然后简单地从输入中获取值并将它们作为日期进行比较

var input1 = compareDate(document.getElementById('from').value);
var input2 = compareDate(document.getElementById('to').value);

Date 对象会做你想做的事 - 为每个日期构造一个，然后使用 >、= 比较它们。

【讨论】：

也许尝试使用input.valueAsDate？
@Endless — valueAsDate 的浏览器支持是...？

【解决方案3】：

您可以使用 javascript 获取输入的值：

var fromValue = document.getElementById('from').value;
var toValue = document.getElementById('to').value;

然后使用 javascript 日期对象将它们转换为日期：

var fromDate = new Date(fromValue);
var toDate = new Date(toValue);

并删除自午夜以来的时间：

fromDate.setHours(0,0,0,0);
toDate.setHours(0,0,0,0);

然后将fromDate 与toDate 进行比较：

if (fromDate === toDate) { ... }

【讨论】：

也许尝试使用input.valueAsDate？
当然，祝你好运。如果您想删除几行代码，请不要忘记包含@Endless 建议。

【解决方案4】：

你可以在Moment.js中使用diff方法

var today = new Date();
var diff = moment().diff(today, 'days');
console.log(diff); // 0

【讨论】：

【解决方案5】：

你可以使用 valueAsDate 然后使用比较器：

 input1 = document.getElementById('from');
 input2 = document.getElementById('to');

 date1 = input1.valueAsDate;
 date2 = input2.valueAsDate;
 console.log(date1 < date2 ? 'valid' : 'invalid');

【讨论】：

【解决方案6】：

对于支持“日期”输入的浏览器，输入值为 DOMString，表示 YYYY-MM-DD 格式的日期，或为空。所以（如果输入值不为空）你可以只比较两个字符串：

const FROM = document.getElementById("from").value;
const TO = document.getElementById("to").value;
return FROM < TO;

【讨论】：