快捷導(dǎo)航

Bootstrap3 datetimepicker控件使用實(shí)例

更新時(shí)間：2016年12月13日 12:25:57 作者：天馬3798

這篇文章主要為大家詳細(xì)介紹了Bootstrap3 datetimepicker控件使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap3 日期+時(shí)間選擇控件的使用方法，供大家參考，具體內(nèi)容如下

1.支持日期選擇，格式設(shè)定
2.支持時(shí)間選擇
3.支持時(shí)間段選擇控制
4.支持中文

官網(wǎng)地址：http://eonasdan.github.io/bootstrap-datetimepicker/
git地址：https://github.com/Eonasdan/bootstrap-datetimepicker
moment語(yǔ)言包：https://github.com/moment/moment
datetimepicker使用配置說(shuō)明：http://eonasdan.github.io/bootstrap-datetimepicker/Options/
moment時(shí)間格式化使用說(shuō)明：http://momentjs.com/docs/

使用方法，引用的文件：

<script src="../Js/jquery-1.11.3.min.js"></script> 
<link href="../Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 
<script src="../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
 
<link href="../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
<script src="../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script> 
<script src="../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

實(shí)例1，簡(jiǎn)單配置：

<div class="row"> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>選擇日期：</label> 
  <!--指定 date標(biāo)記--> 
  <div class='input-group date' id='datetimepicker1'> 
  <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"> 
  <label>選擇日期+時(shí)間：</label> 
  <!--指定 date標(biāo)記--> 
  <div class='input-group date' id='datetimepicker2'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
</div>

$(function () { 

 $('#datetimepicker1').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn') 
 }); 
 $('#datetimepicker2').datetimepicker({ 
 format: 'YYYY-MM-DD hh:mm', 
 locale: moment.locale('zh-cn') 
 }); 
});

實(shí)例2，選擇時(shí)間段：

<div class="row"> 
 <div class='col-sm-6'> 
 <div class="form-group"> 
  <label>選擇開(kāi)始時(shí)間：</label> 
  <!--指定 date標(biāo)記--> 
  <div class='input-group date' id='datetimepicker1'> 
  <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"> 
  <label>選擇結(jié)束時(shí)間：</label> 
  <!--指定 date標(biāo)記--> 
  <div class='input-group date' id='datetimepicker2'> 
  <input type='text' class="form-control" /> 
  <span class="input-group-addon"> 
   <span class="glyphicon glyphicon-calendar"></span> 
  </span> 
  </div> 
 </div> 
 </div> 
</div>

$(function () { 
 var picker1 = $('#datetimepicker1').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn'), 
 //minDate: '2016-7-1' 
 }); 
 var picker2 = $('#datetimepicker2').datetimepicker({ 
 format: 'YYYY-MM-DD', 
 locale: moment.locale('zh-cn') 
 }); 
 //動(dòng)態(tài)設(shè)置最小值 
 picker1.on('dp.change', function (e) { 
 picker2.data('DateTimePicker').minDate(e.date); 
 }); 
 //動(dòng)態(tài)設(shè)置最大值 
 picker2.on('dp.change', function (e) { 
 picker1.data('DateTimePicker').maxDate(e.date); 
 }); 
});