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
    });
}

如果我使用其中一个验证，它工作正常。但如果我同时使用两者，则只有Validation 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
    });
}

这样你首先破坏了datepicker，然后用附加的onSelect方法重新初始化它。我不确定为什么要从元素中删除该类，但如果要销毁该元素，则删除该类不是解决方案。你必须调用销毁功能。

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
});}

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

2 个答案: