1

我的表单中有 3 个元素需要日期/时间选择器。对于每个元素，我需要应用不同的默认时间。

如果我在配置/格式选项中设置了默认时间，那么选择时间的能力就会从日期选择器中消失。如果我在选项中输入有效的时间格式，我就可以使用时间选择器，但选择新日期也会将元素的值设置为当前时间：

$(function () {
        $('#datetimepicker_earliest').datetimepicker({
            locale: 'en-gb',
            format: 'DD/MM/YYYY 16:00',
            extraFormats: ['DD/MM/YYYY H:MM']
        });
    });

我想要实现的是，如果没有选择时间，则使用默认时间。如果使用时间选择器选择了新时间，则使用该时间。这可能吗？

4

1 回答 1

1

dp.change当用户选择一天时，您可以使用事件设置自定义时间。

该事件接收date和oldDate作为参数，您可以在它们上使用时刻的设置器 ( hour, minute) 来根据您的需要更新选择器时间。

date您可以使用函数更改 datetimepicker 的日期。

这是一个工作示例：

$('#datetimepicker_earliest').datetimepicker({
  locale: 'en-gb',
  format: 'DD/MM/YYYY HH:mm',
  extraFormats: ['DD/MM/YYYY H:mm']
}).on('dp.change', function(e){
  if( !e.oldDate || !e.date.isSame(e.oldDate, 'day')){
    e.date.hour(16).minute(0);
    $(this).data("DateTimePicker").date(e.date);
  }
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/en-gb.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="datetimepicker_earliest">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

于 2016-10-03T22:20:42.740 回答