参考链接：http://www.bootcss.com/p/bootstrap-datetimepicker/

1、官网以及很详细的说明了如何使用，这里结合一下自己的使用来写下。

下载解压缩包以后，可以看到有两个实例，可以打开看看，分别是sample in bootstrap v2、sample in bootstrap v3。

2、sample in bootstrap v2实例的代码如下所示。

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

     <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

 </head>

 <body>

 <div class="container">

     <form action="" class="form-horizontal">

         <fieldset>

             <legend>Test</legend>

             <div class="control-group">

                 <label class="control-label">DateTime Picking</label>

                 <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input1" value="" /><br/>

             </div>

             <div class="control-group">

                 <label class="control-label">Date Picking</label>

                 <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input2" value="" /><br/>

             </div>

             <div class="control-group">

                 <label class="control-label">Time Picking</label>

                 <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input3" value="" /><br/>

             </div>

         </fieldset>

     </form>

 </div>

 <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

 <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

 <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

 <script type="text/javascript">

     $('.form_datetime').datetimepicker({

         //language:  'fr',

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         forceParse: ,

         showMeridian:

     });

     $('.form_date').datetimepicker({

         language:  'fr',

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         minView: ,

         forceParse:

     });

     $('.form_time').datetimepicker({

         language:  'fr',

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         minView: ,

         maxView: ,

         forceParse:

     });

 </script>

 </body>

 </html>

效果如下所示：

3、你会发现，案例里面的都是英文，所以我这里修改为了中文。他这个年月日时分秒可以自己决定，是只用年月日，时分秒，还是年月日时分秒等等自己可以进行需求选择。

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

     <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

 </head>

 <body>

 <div class="container">

     <form action="" class="form-horizontal">

         <fieldset>

             <legend>Test</legend>

             <div class="control-group">

                 <label class="control-label">DateTime Picking</label>

                 <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input1" value="" /><br/>

             </div>

             <div class="control-group">

                 <label class="control-label">Date Picking</label>

                 <div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input2" value="" /><br/>

             </div>

             <div class="control-group">

                 <label class="control-label">Time Picking</label>

                 <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

                     <input size="" type="text" value="" readonly>

                     <span class="add-on"><i class="icon-remove"></i></span>

                     <span class="add-on"><i class="icon-th"></i></span>

                 </div>

                 <input type="hidden" id="dtp_input3" value="" /><br/>

             </div>

         </fieldset>

     </form>

 </div>

 <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

 <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

 <!--中文引用-->

 <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

 <!--英文引用-->

 <!--<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>-->

 <script type="text/javascript">

     $('.form_datetime').datetimepicker({

         //language:  'fr',

         language : 'zh-CN',

         //format : 'yyyy-mm-dd hh:ii:ss',//日期格式。可以将日期格式，定成年月日时分秒。

         format : 'yyyy-mm-dd hh:00:00',//日期格式。可以将日期格式，定成年月日时，分秒为0。

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         forceParse: ,

         showMeridian:

     });

     $('.form_date').datetimepicker({

         language : 'zh-CN',

         //format : 'yyyy-mm-dd hh:ii:ss',//日期格式

         //language:  'fr',

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         minView: ,

         forceParse:

     });

     $('.form_time').datetimepicker({

         //language:  'fr',

         language : 'zh-CN',

         //format : 'yyyy-mm-dd hh:ii:ss',//日期格式

         weekStart: ,

         todayBtn:  ,

         autoclose: ,

         todayHighlight: ,

         startView: ,

         minView: ,

         maxView: ,

         forceParse:

     });

 </script>

 </body>

 </html>

效果如下所示：这样一搞，就可以显示中文了，日期格式可以自己定义。更多的使用可以查看api。

待续......

日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日，时分秒的选择。的更多相关文章

  1. 24款最好的jQuery日期时间选择器插件

    如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...

  2. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  3. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  4. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  5. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

  6. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

  7. 日期时间选择器插件flatpickr

    前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...

  8. 解决elementui日期时间选择器提交时与后台date类型不匹配问题

    问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...

  9. Android中实现日期时间选择器(DatePicker和TimePicker)

    利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

随机推荐

  1. 用CNN对CIFAR10进行分类（pytorch）

    CIFAR10有60000个\(32*32\)大小的有颜色的图像,一共10种类别,每种类别有6000个. 训练集一共50000个图像,测试集一共10000个图像. 先载入数据集 import nump ...

  2. MySQL单表查询

    MySQL之单表查询 创建表 # 创建表 mysql> create table company.employee5( id int primary key AUTO_INCREMENT not ...

  3. CF487E Tourists--圆方树

    既然有这条性质,这题就很简单了: \(可能在a->b的简单路径上的点集,就是圆方树上a->b路径上方点代表的点双的并集\) 对每一个方点维护一个\(multiset\),代表其在圆方树上子 ...

  4. Floyed-Warshall【弗洛伊德算法】

    首先介绍一下有关最短路径的知识 从某顶点出发,沿图的边到达另一顶点所经过的路径中,各边上权值之和最小的一条路径叫做最短路径.解决最短路的问题有以下算法,Dijkstra算法,Bellman-Ford算 ...

  5. JavaScript千分符---正则实现

    一般在JavaScript中实现千分符,是使用切割+连接一顿操作 这里尝试一下使用正则快速实现千分符 let num0 = '12' let num1 = '123' let num2 = '1234 ...

  6. HDU - 4734 F(x) （数位dp）

    For a decimal number x with n digits (A nA n-1A n-2 ... A 2A 1), we define its weight as F(x) = A n  ...

  7. I2C(三) linux3.4(内核分析)

    目录 I2C(三) linux3.4(内核分析) (一)总线流程 bus.probe match i2c_device_probe (二)client注册 方式(一)静态加载 方式(二)指定设备 方式 ...

  8. 2018-2019-2 《Java程序设计》第9周学习总结

    20175319 2018-2019-2 <Java程序设计>第9周学习总结 教材学习内容总结 本周学习任务: 下载安装MySQL数据库管理系统. 教材介绍在官网下载安装Mysql服务,启 ...

  9. 超简单CentOS7 配置阿里云yum源

    1.打开centos的yum文件夹 输入命令cd  /etc/yum.repos.d/ 2.用wget下载repo文件 输入命令wget  http://mirrors.aliyun.com/repo ...

  10. 内存屏障和volatile内存语义的实现

    趁周末,把以前的书拿出来,再翻一番,顺便做个笔记: 内存屏障:用来控制和规范cpu对内存操作的顺序的cpu指令. 内存屏障列表: 1.loadload:确保“前者数据装载”先于“后者装载指令”: 2. ...