Question

我为两个不同的文本字段使用 jQuery Datepaker 。一个字段用于起始日期,另一个字段用于结束字段。我用 minDate 关闭了当前日期之前的日期。我的代码是这样的:

$( "#start" ).datepicker({
    minDate: 0,
    dateFormat:  yyyy-mm-dd ,
    showOnFocus: true,
    showTrigger:  <img src="<?php echo base_url()?>images/calender.png" /> 
});    

$( "#end" ).datepicker({
    minDate: 0,
    dateFormat:  yyyy-mm-dd ,
    showOnFocus: true,
    showTrigger:  <img src="<?php echo base_url()?>images/calender.png" /> 
});

现在我需要检查结束日期必须等于或大于开始日期。在结束日期字段中, 选中的开始日期之前的所有日期都必须被禁用。如何做到这一点?

Answer 1

首先,感谢所有帮助我找到答案的人。

解决我的问题的方法是使用以下代码:

$(document).ready(function(){
  $("#depart ,#return_date").datepick({
    minDate:0,
    dateFormat: yyyy-mm-dd ,
    showOnFocus: true,
    showTrigger:  <img src="<?php echo base_url()?>images/calender.png" /> ,
    onSelect: customRange
  });

  function customRange(dates) {
    if (this.id ==  depart )
    {
      $( #return_date ).datepick( option ,  minDate , dates[0] || null);
    }
    else
    {
      $( #depart ).datepick( option ,  maxDate , dates[0] || null);
    }
  }
});

Answer 2

以下是需要的代码示例。

<script>
    $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
    </script>

您可以在以下网址查看演示文稿:Datepicker

从Jquery UI网站查阅。

Answer 3

使用日期js 库用于复杂的日期相关操作 - & gt; datejs.com

Answer 4

you need to reset end date when start date changes. this should do it.

<script type="text/javascript">
    $(document).ready(function () {
        $( #start ).datepicker({
            minDate:  -1d ,
            dateFormat:  yy-mm-dd ,
            showTrigger:  <img src="<?php echo base_url()?>images/calender.png" /> 
        });

        $( #end ).datepicker({
            minDate:  -1d ,
            dateFormat:  yy-mm-dd ,
            showTrigger:  <img src="<?php echo base_url()?>images/calender.png" /> 
        });

        $( #start ).change(function () {
            var sDate = $( #start ).val().split("-");
            var endMinDate = new Date(sDate[0], sDate[1] - 1, sDate[2]);
            $( #end ).datepicker( option ,  minDate , endMinDate);
        });
    }); 
</script>

友情链接