Question

我已经在我的网站上设置了一个多日期选择器日历，我有几天的时间，借助几天的时间，现在我要在日历中选择一个特定的日期范围，我想先获得所选日期范围内我输入字段中的最后日期。例如-我有5天，然后单击一个日历日期，然后自动选择5个即将到来的日期并填写我的输入字段。我该怎么做？屏幕截图如下

var date = new Date();

  $('#datepicker').multiDatesPicker({

   dateFormat: "dd M yy",
   minDate: 0,
   mode: 'daysRange',
   autoselectRange: [0,<?php if(isset($no_days)){ echo $no_days; } ?>],

 });

我期望输出-26 Jul 2019 to 30 Jul 2019，但得到的输出是-26 Jul 2019，27 Jul 2019，28 Jul 2019，29 Jul 2019，{{1} }

Answer 1

这是带日期选择器的示例，既不通过multidatespicker也不通过daterangepicker：

HTML：

<div id="dprange">
    <input />
    <div></div>
</div>

CSS：

#dprange input {
   width: 300px;
}
#dprange div {
   font-size: 9pt;
}
.date-range-selected > .ui-state-active,
.date-range-selected > .ui-state-default {
   background: none;
   background-color: green;
}

JS：

$.datepicker._defaults.onAfterUpdate = null;
var datepicker__updateDatepicker = $.datepicker._updateDatepicker;

$.datepicker._updateDatepicker = function( inst ) {
   datepicker__updateDatepicker.call( this, inst );
   var onAfterUpdate = this._get(inst, 'onAfterUpdate');
   if (onAfterUpdate)
      onAfterUpdate.apply((inst.input ? inst.input[0] : null),
         [(inst.input ? inst.input.val() : ''), inst]);
}

$(function() {

   var cur = -1, prv = -1;

   $('#dprange div').datepicker({
            //numberOfMonths: 3,
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            beforeShowDay: function ( date ) {
                  return [true, ( (date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')];
               },
            onSelect: function ( dateText, inst ) {
                  var d1, d2, d0;
                  prv = cur;
                  cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
                  if ( prv == -1 || prv == cur ) {
                     prv = cur;
                     d0 = $.datepicker.formatDate( 'dd M yy', new Date(Math.min(prv,cur)), {} );
                     $('#dprange input').val( d0 );
                  } else {
                     d1 = $.datepicker.formatDate( 'dd M yy', new Date(Math.min(prv,cur)), {} );
                     d2 = $.datepicker.formatDate( 'dd M yy', new Date(Math.max(prv,cur)), {} );
                     $('#dprange input').val(d1 + ' to '+ d2);
                  }
               },
            onChangeMonthYear: function ( year, month, inst ) {
                  //prv = cur = -1;
               },
            onAfterUpdate: function ( inst ) {
                  $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
                     .appendTo($('#dprange div .ui-datepicker-buttonpane'))
                     .on('click', function () { $('#dprange div').hide(); });
               }
         }).position({
            my: 'left top',
            at: 'left bottom',
            of: $('#dprange input')
         })
      .hide();

   $('#dprange input').on('focus', function (e) {
         var v = this.value,
             d;
         try {
            if ( v.indexOf(' to ') > -1 ) {
               d = v.split(' to ');
               prv = $.datepicker.parseDate( 'dd M yy', d[0] ).getTime();
               cur = $.datepicker.parseDate( 'dd M yy', d[1] ).getTime();
            } else if ( v.length > 0 ) {
               prv = cur = $.datepicker.parseDate( 'dd M yy', v ).getTime();
            }
         } catch ( e ) {
            cur = prv = -1;
         }
         if ( cur > -1 )
            $('#dprange div').datepicker('setDate', new Date(cur));
         $('#dprange div').datepicker('refresh').show();
      });
});

如何在多日期选择器jQuery Clendar中从选定的日期范围中获取第一个和最后一个日期

1 个答案: