参考链接：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. EnableEurekaServer基本配置

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. uploadify多文件上传实例--C#

    下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...

  3. ZooKeeper集群与Leader选举

    说说你对ZooKeeper集群与Leader选举的理解?   ZooKeeper是一个开源分布式协调服务.分布式数据一致性解决方案.可基于ZooKeeper实现命名服务.集群管理.Master选举.分 ...

  4. Nginx下配置SSL模块，支持https

    Http与Https的区别 HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效 ...

  5. Spring Boot学习总结三

    1,mybatis在spring boot下的2种使用模式 无配置文件注解版 application.properties添加相关配置 mybatis.type-aliases-package=com ...

  6. Java基础 -- 持有对象(容器)

    一 容器的用途 如果对象的数量与生命周期都是固定的,自然我们也就不需要很复杂的数据结构. 我们可以通过创建引用来持有对象,如 Class clazz; 也可以通过数组来持有多个对象,如 Class[] ...

  7. CodeForces - 314C Sereja and Subsequences （树状数组+dp）

    Sereja has a sequence that consists of n positive integers, a1, a2, ..., an. First Sereja took a pie ...

  8. zabbix模板化监控

    zabbix模板化监控 1. 实验简述 在zabbix监控中,有很多组的概念,具体有以下几种: 1. 主机和主机组,相同类型/应用的主机,可以归属于同一个主机组 2. item和application ...

  9. 多输入select

    目录 多输入select IO模型 select介绍 小demo 注意 引入电子书 title: 多输入select date: 2019/3/20 17:21:34 toc: true --- 多输 ...

  10. Linux进程管理工具Supervisor

    简述 Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启. 它是通过fork/exec的方式把这些被管 ...