Question

我将jQuery Datepicker用于两个不同的文本字段。一个字段用于开始日期，另一个用于结束字段。我使用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

以下是所需代码的示例。

<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 2

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

我的问题的解决方案是使用以下代码：

$(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 3

使用datejs库进行复杂的日期相关操作 - ＆gt; datejs.com

Answer 4

您需要在开始日期更改时重置结束日期。这应该做到。

<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>

如何使用jQuery Datepicker比较开始日期和结束日期？

4 个答案: