Question

我正在使用Materialisecss。现在我正在创建一个酒店预订系统。我想要的是，当我在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

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

Answer 2

SET @sql = NULL;
SELECT
  GROUP_CONCAT(DISTINCT
    CONCAT(
      'count(case when course = ''',
      course,
      ''' then 1 end) AS ',
      replace(course, ' ', '')
    )
  ) INTO @sql
from tbl_course;

SET @sql = CONCAT('SELECT course, ', @sql, ' from tbl_course

group by course');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

在我的第一个datepicker

2 个答案: