2016-09-29 60 views
1

我的表单中有3个元素需要日期/时间选择器。对于每个元素,我需要应用不同的默认时间。默认时间使用TimePicker(预定义时间禁用timepicker)

如果我在config/format选项中设置了默认时间,那么选择时间的能力从datepicker中消失。如果我输入的选项的有效时间格式,我是那么能够使用timepicker,而是选择一个新的日期还设置元素的当前的时间价值:

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

我想什么来实现如果没有选择时间,则使用默认时间。如果使用时间选择器选择新时间,则使用此时间。这可能吗?

回答

1

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

事件接收dateoldDate作为参数,你可以使用瞬间的制定者(hourminute)对他们根据你的需要来更新选择器的时间。

您可以使用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>