jQuery日期选择器：验证日期

Question

我已经设定了一个jQuery类：

i have set a jquery class:

$(function() {
            $( ".datepickerIT" ).datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: "clip",
                dateFormat: "dd/mm/yy",
                minDate: "01/01/1925",
                maxDate: "31/12/2050",
                changeMonth: true,
                changeYear: true,
                yearRange: "1925:2050",
                regional: "it"                      
            });
        });

我希望添加一个日期检查控件，如果用户输入不是有效日期，则会发出警报。

如何向类“ .datepickerIT”添加此类检查？

onClose: function(dateText, inst) {
        try {
            $.datepicker.parseDate('dd/mm/yy', dateText);
        } catch (e) {
            alert(e);
        };

我应该在头部引用哪个插件？

- Manlio

Answer 1

Date.parse 不建议使用，因为不同的主机解析日期字符串的方式仍存在很多差异。[1][2]

我会使用 moment 进行日期验证。

moment(newDate, 'DD/MM/YYYY', true).isValid()

jsfiddle: http://jsfiddle.net/dw8xyzd4/

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

[2] 为什么 Date.parse 返回错误的结果？

- Razan Paul

---

我需要包含 moment.js 库才能使用它吗？ - xpuc7o

是的，isValid函数是moment对象的一部分。 - Razan Paul

Answer 2

您可以通过以下方式验证日期（无需插件）：

$(document).ready(function(){
    $("#datepicker").datepicker();
    $("#datepicker").blur(function(){
        val = $(this).val();
        val1 = Date.parse(val);
        if (isNaN(val1)==true && val!==''){
           alert("error")
        }
        else{
           console.log(val1);
        }
    });
});

这是一个有效的代码示例

更新：正确的方法由@Razan Paul提到

- Gaurav Kalyan

---

我尝试了你的fiddle，对于没有31日的月份，Date.parse返回的值是NaN。有什么解决办法吗？ - Zaimatsu

此方法接受无效日期。例如，日期 "40/40/2016" 的结果为 1557439200000。我会尽力使翻译通俗易懂，但不改变原意。 - Joeblade

Answer 3

Date.parse()不支持dd/mm/yyyy格式，而datepicker.getDate在任何解析错误时都会将日期设置为当前日期，因此使用new Date(yyyy, mm, dd)进行验证以确保转换后日期的部分是一致的：

$(function() {
    $(".datepickerIT")
        .datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            showAnim: "clip",
            dateFormat: "dd/mm/yy",
            minDate: "01/01/1925",
            maxDate: "31/12/2050",
            changeMonth: true,
            changeYear: true,
            yearRange: "1925:2050",
            regional: "it"                      
        })
        .on('blur', function() { // This check is for dd/mm/yyyy format but can be easily adapted to any other
            if(this.value.match(/\d{1,2}[^\d]\d{1,2}[^\d]\d{4,4}/gi) == null)
                alert('Invalid date format');
            else {
                var t = this.value.split(/[^\d]/);
                var dd = parseInt(t[0], 10);
                var m0 = parseInt(t[1], 10) - 1; // Month in JavaScript Date object is 0-based
                var yyyy = parseInt(t[2], 10);
                var d = new Date(yyyy, m0, dd); // new Date(2017, 13, 32) is still valid
                if(d.getDate() != dd || d.getMonth() != m0 || d.getFullYear() != yyyy)
                    alert('Invalid date value');
            }
        });
});

- Y.B.

---

这应该是被接受的答案。评论中的完整性和详细程度确实有助于理解正在发生的事情。实际上，我因此更了解正则表达式。感谢您的回答Y.B.，它被我使用了。 - Alexander Dixon

我遇到了一个不希望出现的行为，即在选择器中单击会使数据失焦并触发验证。这是有道理的，但会使失焦验证变得不够灵活。 - GoetzOnline

我通过使用.datepicker的onClose事件/属性来触发验证，从而解决了我的问题，并用.blur()避免了不必要的麻烦。 - GoetzOnline

Answer 4

$(document).ready(function(){

//  Check in date 
    $("#in" ).datepick({
        dateFormat: "mm/dd/yy",
        minDate:"0+1",
        maxDate: "2years",
        changeMonth:true, 
        changeYear:true,    
        onSelect:function(date_text,inst){
            var from = new Date(date_text);
            $( "#out" ).datepicker( "option", "minDate",from);
        }       


    });

//  Check out date  



});

注意：这里的字段名是“field name”，而“datepick”是您的插件名称。

- Anuj Dubey