jQuery中的开始日期结束日期验证

Question

我必须使用 jQuery 验证开始日期小于结束日期和结束日期大于开始日期。应用程序使用 HTML 5 + Thymeleaf。

代码：

验证 1：

$('#ValidFrom').removeClass('hasDatepicker').datepicker({ 
    dateFormat: 'dd-M-yy',
    changeMonth: true,
    changeYear: true,
    onSelect : ChangeEndDate
});

function ChangeEndDate() {
    var d = $("#ValidFrom").datepicker('getDate'); 
    $('#ValidTo').removeClass('hasDatepicker').datepicker({
        minDate : d, 
        dateFormat: 'dd-M-yy',
        changeMonth: true,
        changeYear: true
    });
}

验证 2：

$('#ValidTo').removeClass('hasDatepicker').datepicker({ 
    dateFormat: 'dd-M-yy',
    changeMonth: true,
    changeYear: true,
    onSelect : ChangeStartDate
});

function ChangeStartDate() {
    var d = $("#ValidTo").datepicker('getDate');  
    $('#ValidFrom').removeClass('hasDatepicker').datepicker({
        maxDate : d, 
        dateFormat: 'dd-M-yy',
        changeMonth: true,
        changeYear: true
    });
}

如果我使用其中任何一种验证，它都可以正常工作。但如果我同时使用两者，则只有验证 1 有效。任何人都可以帮助解决这个问题。

提前致谢。

Answer 1

因为在您的更改方法中，您通过调用它再次创建日期选择器并且不再传递更改侦听器函数。例如：

function ChangeStartDate() {
    var d = $("#ValidTo").datepicker('getDate');
    $('#ValidFrom').datepicker("destroy");
    $('#ValidFrom').datepicker({
        maxDate : d, 
        dateFormat: 'dd-M-yy',
        changeMonth: true,
        changeYear: true,
        onSelect : ChangeEndDate
    });
}

这样，您首先销毁日期选择器，然后使用附加的 onSelect 方法重新初始化它。我不确定为什么要从元素中删除类，但是如果要销毁元素，则删除类不是解决方案。你必须调用destroy函数。

Answer 2

试试这个方法。您必须在再次初始化之前销毁选择器。在初始化选择器中，您必须设置选项onSelect。希望对你有更多帮助

$('#ValidFrom').datepicker({ 
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect : ChangeEndDate});

function ChangeEndDate() {
var d = $("#ValidFrom").datepicker('getDate'); 
$( "#ValidTo" ).datepicker( "destroy" );
$('#ValidTo').datepicker({
    minDate : d, 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    onSelect : ChangeStartDate
});}

$('#ValidTo').datepicker({ 
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect : ChangeStartDate});
function ChangeStartDate() {
var d1 = $("#ValidTo").datepicker('getDate');  
$( "#ValidFrom" ).datepicker( "destroy" );
$('#ValidFrom').datepicker({
    maxDate : d1 , 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    onSelect : ChangeEndDate
});}