0

我正在使用 Materializecss。现在我正在创建一个酒店预订系统。我想要的是，当我在 DateIn Datepicker 上选择一个日期时，DateOut Datepicker 的最小日期应该比所选日期早 1 天。在第一次选择时，它正在工作。但是，当我尝试选择一个高于所选日期的签入日期时，日期选择器的最小日期不会改变。

  $('#dp_ci').pickadate(
      {
          selectMonths: true, // Creates a dropdown to control month
          min : new Date(),
          clear: 'Clear',
          close: 'Ok',
          closeOnSelect: false // Close upon selecting a date,       
        });

      $('#dp_ci').change(function(){
        selected_ci_date ="";
        selected_ci_date = $('#dp_ci').val();
        if (selected_ci_date != null)
        {
          var cidate = new Date(selected_ci_date);
          alert(cidate);
          $("#dp_co").val("");
          $("#dp_co").removeAttr("disabled");
          min_codate = "";
          min_codate = new Date();
          min_codate.setDate(cidate.getDate()+1);

          $('#dp_co').pickadate(
          {
            min : min_codate,
          selectMonths: true, // Creates a dropdown to control month
          clear: 'Clear',
          close: 'Ok',
          closeOnSelect: false // Close upon selecting a date,
        });

          $('#dp_co').change(function(){
            if ($('#dp_co').val() != null)
            {
              var ci = new Date($('#dp_ci').val());
              var co = new Date($('#dp_co').val());
              var noOfdays = co.getDate() - ci.getDate() ;
              alert(noOfdays);
            }
          });

        }
      })

编辑：示例：第一次选择：dp_ci：2017 年 9 月 27 日（已选择） dp_co（分钟）：2017 年 9 月 28 日（禁用后面的日期） dp_co：2017 年 9 月 28 日（已选择）

第二次选择：（我将再次选择 dp_ci） dp_ci：2017 年 9 月 29 日（已选择） dp_co（分钟）：2017 年 9 月 28 日（仍然应该是 9 月 29 日）

更新：我找到了一个能够解决我的问题的答案。唯一的一件事是 dp_co 的最小日期不应允许与 dp_ci 相同的日期：任何解决方案？

$('#dp_ci').pickadate(
  {
    selectMonths: true, // Creates a dropdown to control month
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    min: new Date()
  });


var from_$input = $('#dp_ci').pickadate(),
    from_picker = from_$input.pickadate('picker')

var to_$input = $('#dp_co').pickadate(),
    to_picker = to_$input.pickadate('picker')


// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) 
{
  to_picker.set('min', from_picker.get('select'))

}
if ( to_picker.get('value') ) 
{
  from_picker.set('max', to_picker.get('select'))


}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) 
{

  if ( event.select ) 
  {
    to_picker.set('min', from_picker.get('select'))    
  }

  else if ( 'clear' in event ) 
  {
    to_picker.set('min', false)
  }

})

to_picker.on('set', function(event) 
{
  if ( event.select ) 
  {
    from_picker.set('max', to_picker.get('select'))
  }
  else if ( 'clear' in event ) 
  {
    from_picker.set('max', false)
  }
})

在此处获取代码：CodePen

4

2 回答 2

1

您需要将picker对象保存在开始选择器和结束选择器上，并且在startpicker更改时 - 您只需要选择器set的min值end：

var startdate = $('#dp_ci').pickadate('picker');
var enddate = $('#dp_co').pickadate('picker');

$('#dp_ci').change(function() {
  if (selected_ci_date != null)   {
    enddate.set('min', min_codate);
  }
})

这是完整的示例： 

$('#dp_ci').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  min : new Date(),
  clear: 'Clear',
  close: 'Ok',
  closeOnSelect: false // Close upon selecting a date,       
})
var startdate = $('#dp_ci').pickadate('picker');
$('#dp_co').pickadate({
  min : new Date(),
  selectMonths: true, // Creates a dropdown to control month
  clear: 'Clear',
  close: 'Ok',
  closeOnSelect: false // Close upon selecting a date,
})
var enddate = $('#dp_co').pickadate('picker');

$('#dp_ci').change(function() {
  selected_ci_date ="";
  selected_ci_date = $('#dp_ci').val();
  if (selected_ci_date != null)   {
    var cidate = new Date(selected_ci_date);
    alert(cidate);
    $("#dp_co").val("");
    $("#dp_co").removeAttr("disabled");
    min_codate = "";
    min_codate = new Date();
    min_codate.setDate(cidate.getDate()+1);
    enddate.set('min', min_codate);
  }
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

<div class = "row">
  <div class ="col s6">
    <label>Date of Check-in </label>
    <input type="text" class="datepicker" id="dp_ci">
  </div>

  <div class ="col s6">
    <label>Date of Check-out </label>
    <input disabled="true" type="text" class=" datepicker" id="dp_co">
  </div>
</div>

于 2017-09-13T01:25:28.227 回答
0 
$('#txt_performanceDayFlex1').daterangepicker({
     "locale": {
         "format": "MM/DD/YY"
     },
     singleDatePicker: true,
     minDate: new Date()
 }, function (start, end, label) {
     $scope.PerformanceStartDate = start.format('MM/DD/YY');        
     $scope.minimumDate = minimumFormatRequestDate( $scope.PerformanceStartDate);
     LodaDate();  //You need to reload the End Date then it Behave Properly and you can add one day head in $scope.minimumDate this in same format
     ResetDateAndtime(1);
     $scope.$apply();
 });

 function LodaDate() {
     $('#txt_performanceDayFlex2').daterangepicker({
         "locale": {
             "format": "MM/DD/YY"
         },
         singleDatePicker: true,
         minDate: $scope.minimumDate,
         endDate: new Date()
     }, function (start, end, label) {

         $scope.PerformanceEndDate = start.format('MM/DD/YY');           
         $scope.$apply();
     });
     function minimumFormatRequestDate(date) {
         if (date != undefined && date != null) {
             var newDate = date.split('.').reverse().join('/')
             var d = new Date(newDate),
                 month = '' + (d.getMonth() + 1),
                 day = '' + d.getDate(),
                 year = d.getFullYear();

             if (month.length < 2) month = '0' + month;
             if (day.length < 2) day = '0' + day;
             return [day, month, year].join('-');
         } else {
             return 'NA';
         }
     }
于 2017-09-13T07:16:15.743 回答