Question

我有一个日期范围选择的两个日期选择器，它与jquery UI的演示页面上的演示相同，但是，当用户实际手动删除日期字段值时，我需要将其他日期字段重置为如何原来。我尝试编写下面的代码，但由于一些奇怪的原因，每当我在from日历中选择一个日期时，它会显示在to字段中，并且minDate / maxDate设置似乎没有工作。

$( "#dt_from" ).blur(function(){
        if($(this).val()=="")
        {
            $( "#dt_to" ).datepicker( "option", "minDate", "+0" );
        }
    }).datepicker({
        defaultDate: "+0d",
        showOn: "button",
        buttonImage: "images/Cal.gif",
        buttonImageOnly: true,
        minDate:+0,
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#dt_to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#dt_to" ).blur(function(){
        if($(this).val()=="")
        {
            $( "#dt_from" ).datepicker( "option", "maxDate", "" );
        }
    }).datepicker({
        defaultDate: "+0d",
        showOn: "button",
        buttonImage: "images/Cal.gif",
        buttonImageOnly: true,
        minDate:+0,
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#dt_from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });

我相信模糊事件会以某种方式造成这种混乱，但我不知道如何修复它。

Answer 1

感谢另一篇帖子How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?我想出了如何解决这个问题。我在这里发布代码供将来参考。

$( "#dt_from" ).prop("readonly",true).datepicker({
        defaultDate: "+0d",
        showOn: "button",
        buttonImage: "images/Cal.gif",
        buttonImageOnly: true,
        minDate:+0,
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            if(selectedDate!="")
            {
                $( "#dt_to" ).datepicker( "option", "minDate", selectedDate );
            }
        }
    }).keyup(function(e) {
        if(e.keyCode == 8 || e.keyCode == 46) {
            $.datepicker._clearDate(this);
            $( "#dt_to" ).datepicker( "option", "minDate", "today" );
        }
    });
    $( "#dt_to" ).prop("readonly",true).datepicker({
        defaultDate: "+0d",
        showOn: "button",
        buttonImage: "images/Cal.gif",
        buttonImageOnly: true,
        minDate:+0,
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            if(selectedDate!="")
            {
                $( "#dt_from" ).datepicker( "option", "maxDate", selectedDate );
            }
        }
    }).keyup(function(e) {
        if(e.keyCode == 8 || e.keyCode == 46) {
            $.datepicker._clearDate(this);
            $( "#dt_from" ).datepicker( "option", "maxDate", "" );
        }
    });

我将字段readonly只是为了安全，然后在del / bkspace密钥中检查我重置选项。

删除后重置jquery ui datepicker的minDate maxDate

1 个答案: