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

【问题标题】：How can I compare a start date and end date using the jQuery Datepicker?如何使用 jQuery Datepicker 比较开始日期和结束日期？
【发布时间】：2012-05-24 05:32:03
【问题描述】：

我将 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" />'
});

现在我需要检查结束日期是否必须等于或大于开始日期。在结束日期字段中，必须禁用所选开始日期之前的所有日期。怎么办？

【问题讨论】：

标签： php jquery ajax jquery-ui-datepicker

【解决方案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 网站。

【讨论】：

我必须挑战你，我的答案更具可读性。你说什么？ :)

【解决方案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);
    }
  }
});

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

此代码不起作用....我只想在当前日期之前的所有天都禁用开始文本字段，在结束文本字段的情况下，我希望在开始文本字段中插入日期之前的所有天都禁用.如何在上面的代码中完成.......