Bootstrap3 datetimepicker控件使用实例详解

曾经终败给现在 2022-06-10 14:11 657阅读 0赞

原文网址： [http://www.jb51.net/article/99896.htm][http_www.jb51.net_article_99896.htm]

Bootstrap3 日期+时间选择控件的使用方法，供大家参考，具体内容如下

1.支持日期选择，格式设定  
2.支持时间选择  
3.支持时间段选择控制  
4.支持中文

官网地址：[http://eonasdan.github.io/bootstrap-datetimepicker/][http_eonasdan.github.io_bootstrap-datetimepicker]  
git地址：[https://github.com/Eonasdan/bootstrap-datetimepicker][https_github.com_Eonasdan_bootstrap-datetimepicker]  
moment语言包：[https://github.com/moment/moment][https_github.com_moment_moment]  
datetimepicker使用配置说明：[http://eonasdan.github.io/bootstrap-datetimepicker/Options/][http_eonasdan.github.io_bootstrap-datetimepicker_Options]  
moment时间格式化使用说明：[http://momentjs.com/docs/][http_momentjs.com_docs]

使用方法，引用的文件：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"../Js/jquery-1.11.3.min.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>link</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"../Js/bootstrap-3.3.5-dist/css/bootstrap.css"</code> 
      <code>rel</code> 
      <code>=</code> 
      <code>"stylesheet"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>link</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"</code> 
      <code>rel</code> 
      <code>=</code> 
      <code>"stylesheet"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"</code> 
      <code>&gt;&lt;/</code> 
      <code>script</code> 
      <code>&gt; </code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**实例1**，简单配置：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"row"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'col-sm-6'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-group"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>&gt;选择日期：&lt;/</code> 
      <code>label</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;!--指定 date标记--&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'input-group date'</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'datetimepicker1'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>'text'</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-control"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"input-group-addon"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"glyphicon glyphicon-calendar"</code> 
      <code>&gt;&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'col-sm-6'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-group"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>&gt;选择日期+时间：&lt;/</code> 
      <code>label</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;!--指定 date标记--&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'input-group date'</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'datetimepicker2'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>'text'</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-control"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"input-group-addon"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"glyphicon glyphicon-calendar"</code> 
      <code>&gt;&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$(</code> 
      <code>function</code> 
      <code>() { &lt;br&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>$(</code> 
      <code>'#datetimepicker1'</code> 
      <code>).datetimepicker({ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>format: </code> 
      <code>'YYYY-MM-DD'</code> 
      <code>, </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>locale: moment.locale(</code> 
      <code>'zh-cn'</code> 
      <code>) </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>$(</code> 
      <code>'#datetimepicker2'</code> 
      <code>).datetimepicker({ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>format: </code> 
      <code>'YYYY-MM-DD hh:mm'</code> 
      <code>, </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>locale: moment.locale(</code> 
      <code>'zh-cn'</code> 
      <code>) </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[![20161213122956542.jpg_2016111312304][]][20161213122956542.jpg_2016111312304]

**实例2**，选择时间段：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"row"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'col-sm-6'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-group"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>&gt;选择开始时间：&lt;/</code> 
      <code>label</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;!--指定 date标记--&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'input-group date'</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'datetimepicker1'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>'text'</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-control"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"input-group-addon"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"glyphicon glyphicon-calendar"</code> 
      <code>&gt;&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'col-sm-6'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-group"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>&gt;选择结束时间：&lt;/</code> 
      <code>label</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;!--指定 date标记--&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>'input-group date'</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'datetimepicker2'</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>'text'</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"form-control"</code> 
      <code>/&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"input-group-addon"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>span</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"glyphicon glyphicon-calendar"</code> 
      <code>&gt;&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>span</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[?][Link 1]

[![20161213123037830.jpg_20161113123044][]][20161213123037830.jpg_20161113123044]

[http_www.jb51.net_article_99896.htm]: http://www.jb51.net/article/99896.htm
[http_eonasdan.github.io_bootstrap-datetimepicker]: http://eonasdan.github.io/bootstrap-datetimepicker/
[https_github.com_Eonasdan_bootstrap-datetimepicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
[https_github.com_moment_moment]: https://github.com/moment/moment
[http_eonasdan.github.io_bootstrap-datetimepicker_Options]: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
[http_momentjs.com_docs]: http://momentjs.com/docs/
[Link 1]: http://www.jb51.net/article/99896.htm#
[20161213122956542.jpg_2016111312304]: http://files.jb51.net/file_images/article/201612/20161213122956542.jpg?2016111312304
[20161213123037830.jpg_20161113123044]: http://files.jb51.net/file_images/article/201612/20161213123037830.jpg?20161113123044