日期选择框示例

默认输入

<input class="form-control control-datetimepicker" value="2012-06-15 14:45" type="text" readonly="readonly">
 
<script type="text/javascript">
    $(".control-datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>

默认组件

<div class="input-group date control-datetimepicker"> 
  <input class="form-control" type="text" value="" readonly="readonly"> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>

<script type="text/javascript">
$(".control-datetimepicker").datetimepicker({
    format: "dd MM yyyy - hh:ii"
});
</script>

定位

日期选择框的默认位置是在输入组件的下方以及图标按钮的右侧。在某些情况下，可以通过 pickerPosition 配置项定义其位置。

<div class="input-group date control-datetimepicker"> 
  <input class="form-control" type="text" value="" readonly="readonly"> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>

<script type="text/javascript">
$(".control-datetimepicker").datetimepicker({
    format: "dd MM yyyy - hh:ii",
    autoclose: true,
    todayBtn: true,
    pickerPosition: "bottom-left"
});
</script>

高级设置

输入组件下含有样式类 glyphicon 和 glyphicon-remove 的图标按钮将作为重置按钮。在下面的示例中，日期视图被默认设置为了 2013年2月21日，并且不能选择 2013年2月14日 之前的日期；一旦日期和时间都设置完毕，日期选择框将自动关闭；点击 tody 按钮时会自动填入当天的日期时间；minuteStep 配置项用来设置小时视图下设置分钟时的间隔。

<div class="input-group date control-datetimepicker" data-date="2013-02-21T15:25:00Z"> 
  <input class="form-control" type="text" value="" readonly="readonly">
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-remove"></i> 
  </span> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>
<script type="text/javascript">
$(".control-datetimepicker").datetimepicker({
    format: "dd MM yyyy - hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: "2013-02-14 10:00",
    minuteStep: 10
});
</script>

设置镜像区域

每次触发更新时，第二个与之关联的区域也会随之以另一种格式化后的日期时间更新。需要同时设置 id 和 format。点击重置按钮会同时清空两个区域内的值。

<div class="input-group date control-datetimepicker" data-date="2012-12-21T15:25:00Z"> 
  <input class="form-control" type="text" value="" readonly="readonly">
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-remove"></i> 
  </span> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>
<input class="form-control" id="mirror-field" type="text" value="" readonly="readonly" />
<script type="text/javascript">
$(".control-datetimepicker").datetimepicker({
    format: "dd MM yyyy - hh:ii",
    linkField: "mirror-field",
    linkFormat: "yyyy-mm-dd hh:ii"
});
</script>

12小时制

通过设置配置项 showMeridian 为 true 可以开启12小时制格式。你可以在日期视图下选择 上午/下午（标记 P），同时，小时（标记 HH）将变为12小时格式。

<div class="input-group date control-datetimepicker" data-date="2012-12-21T15:25:00Z"> 
  <input class="form-control" type="text" value="" readonly="readonly">
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-remove"></i> 
  </span> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>
<script type="text/javascript">
$('.control-datetimepicker').datetimepicker({
    format: "dd MM yyyy - HH:ii P",
    showMeridian: true,
    autoclose: true,
    todayBtn: true
});
</script>

响应鼠标滚轮事件

建议将配置项 viewSelect 设为 4。

<div class="input-group date control-datetimepicker"> 
  <input class="form-control" type="text" value="" readonly="readonly">
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-th"></i> 
  </span> 
</div>
<script type="text/javascript">
$('#control-datetimepicker').datetimepicker({
    viewSelect: 4,
    wheelViewModeNavigation: true
});
</script>