使用 jquery 触发另一个日期时间选择器

Question

我想在 select 约会后在另一个选择器中打开 datepicker。为此，我们可以在 datepicker 中看到很多建议和答案，但我找不到 datetimepicker 的解决方案。我在项目中使用的默认datetimepicker是这个

$('.datepicker').datetimepicker({
    format: 'MM/DD/YYYY',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
        inline: true
    }
});

尝试

$( "#QuoteDate" ).datepicker({
    minDate: 0, 
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
    onSelect: function( selectedDate ) {
        $( "#DueDate" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#DueDate" ).datepicker('show');
        }, 16);
    }
});
$( "#DueDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
});

如果我尝试像 onSelect 那样编写代码：如 datepicker 中那样，它不会接受。请任何人帮助我找到解决方案。 onSelect 此选择器中的日期将调用另一个选择器。

Answer 1

我想你正在寻找 change 事件，所以当你在其中一个日期选择器中选择了一个日期时，你可以得到一个回调，它被改变了，之后在 openAnotherDatePicker 函数中，你可以尝试从使用 jquery .val() 函数的事件中获取选定的值，并将选定的日期传递给下一个日期选择器

更新：这里是 xdan datetimepicker 的实时和工作示例：

var setMinDate = function( currentDateTime ){
 this.setOptions({minDate:currentDateTime});
};

$('#QuoteDate').datetimepicker({
  format:'d-m-Y h:i',
  onChangeDateTime:openAnotherDatePicker,
  closeOnDateSelect:true
 });
$('#DueDate').datetimepicker({
  format:'d-m-Y h:i',
  onShow:setMinDate,
  closeOnDateSelect:true
 })

function openAnotherDatePicker( selectedDate ) {
 $( "#DueDate" ).val($( "#QuoteDate" ).val());
 $( "#DueDate" ).datetimepicker('show');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>

<p>
Start <br /><input id="QuoteDate" type="text" value="12-11-2017 06:24">
<br />
End <br /><input id="DueDate" type="text" value="13-11-2017 06:24">
</p>

Answer 2

如果您需要链接日期时间选择器，请查看文档中的 Linked Pickers 示例。

您必须向 dp.change event since the datetimepicker has no onSelect option. Note that dp.change 添加监听器：

Fired when the date is changed.

Parameters:

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

您可以使用 show() 函数打开第二个日期时间选择器。

这里有一个完整的实例：

var icons = {
  time: "fa fa-clock-o",
  date: "fa fa-calendar",
  up: "fa fa-chevron-up",
  down: "fa fa-chevron-down",
  previous: 'fa fa-chevron-left',
  next: 'fa fa-chevron-right',
  today: 'fa fa-screenshot',
  clear: 'fa fa-trash',
  close: 'fa fa-remove',
  //inline: true
};

$('#QuoteDate').datetimepicker({
  format: 'MM/DD/YYYY',
  useCurrent: false,
  minDate: moment().startOf('day'),
  maxDate: moment().add(2, 'years'),
  icons: icons
}).on('dp.change', function(e){
  console.log('change', e.date, e.oldDate);
  if( 
    ( e.date && !e.oldDate ) ||
    ( e.date && e.oldDate && !e.date.isSame(e.oldDate, 'day') )
  ){
    setTimeout(function(){
      $('#DueDate').data("DateTimePicker").show();
    }, 16);
  }
  $('#DueDate').data("DateTimePicker").minDate(e.date);
});

$('#DueDate').datetimepicker({
  format: 'MM/DD/YYYY',
  useCurrent: false,
  minDate: moment().startOf('day'),
  maxDate: moment().add(2, 'years'),
  icons: icons
}).on('dp.change', function(e){
  $('#QuoteDate').data("DateTimePicker").maxDate(e.date);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id='QuoteDate'>
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id='DueDate'>
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

由于您使用的是 datetimepicker，因此您可以使用 minDate: moment().startOf('day') 代替 minDate: 0 并使用 maxDate: moment().add(2, 'years') 代替 maxDate: "+2Y"（有关更多信息，请参见 moment startOf() and add() 文档信息）。

根据 Linked Pickers 示例中的建议，您必须使用 useCurrent: false 选项。

使用 jquery 触发另一个日期时间选择器

Trigger another datetimepicker using jquery

javascript

jquery

datepicker

datetimepicker

eonasdan-datetimepicker