DatePicker开始日期和完成日期验证没有插件

时间:2014-10-01 09:17:15

标签: javascript jquery asp.net-mvc-3 jquery-ui datepicker

将Asp.Net MVC 4与JqueryUI一起使用。

我有两个文本框,为我提供了日期选择器。我需要验证;开始日期可以等于完成日期,完成日期不能少于开始日期。

Datepicker脚本代码;

<script>
    $(function () {
        $(".date").datepicker({
            changeMonth: true,
            changeYear: true
        });
    });

</script>

我的文本框:

<td>@Html.TextBoxFor(model => model.StartDate, "{0:dd.MM.yyyy}", new { @class = "date", @id="dt1" }) </td>

<td>@Html.TextBoxFor(model => model.FinishDate, "{0:dd.MM.yyyy}", new { @class = "date", @id="dt2" }) </td>

I found this code from this subject。但我无法获得验证。我无法弄清楚问题是什么。所有帮助将不胜感激。

$(document).ready(function () {

$("#dt1").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 0,
    onSelect: function (date) {
        var dt2 = $('#dt2');
        var startDate = $(this).datepicker('getDate');
        var minDate = $(this).datepicker('getDate');
        dt2.datepicker('setDate', minDate);
        startDate.setDate(startDate.getDate() + 30);
        //sets dt2 maxDate to the last day of 30 days window
        dt2.datepicker('option', 'maxDate', startDate);
        dt2.datepicker('option', 'minDate', minDate);
        $(this).datepicker('option', 'minDate', minDate);
    }
});
$('#dt2').datepicker({
    dateFormat: "dd-M-yy"
});

});

JQuery - end date less than start date

1 个答案:

答案 0 :(得分:1)

我认为这可能对您有所帮助,当您更改其中一个日期选择器时,如果两者都不同,则会显示错误。并且将isValid变量设置为false也会使其无法提交

<script>
    var isValid=true;
    $(function () {
        $(".date").datepicker({
            changeMonth: true,
            changeYear: true,
            onSelect: function() {
                var date1 = $("#dt1").datepicker('getDate');
                var date2 = $("#dt2").datepicker('getDate');
                if (date1.getDate() === date2.getDate() && 
                    date1.getMonth() === date2.getMonth() &&
                    date1.getFullYear() === date2.getFullYear())
                {
                     isValid=false;
                     //ALERT error 
                }
            }
        });
    });

</script>