douwengzao5790
2012-05-24 05:32
浏览 47
已采纳

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

I use the jQuery Datepicker for two different text fields. One field for start date and another for end field. I disable date before current date using minDate. My code is like this:

$( "#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" />'
}); 

Now I need to check that end date must be equal to or greater than start date. And in the end date field, all dates before the start date selected must be disabled. How can it be done?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • duanmou9228 2012-05-25 04:25
    已采纳

    Firstly thanks to all who help me to find the answer.

    Solution for my question is by using following codes:

    $(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);
        }
      }
    });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongshi1934 2012-05-24 05:37

    Use datejs library for complex date related manipulations --> datejs.com

    评论
    解决 无用
    打赏 举报
  • dua55014 2012-05-24 06:18

    Here is the example of the code that is required.

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

    You can view the demo at: Datepicker

    Referred from the Jquery UI website.

    评论
    解决 无用
    打赏 举报
  • douxian8883 2012-05-24 06:18

    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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题