使用方法

1. 添加资源

2. 编写代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

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

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

</head>

<body>

    <input type="text" id="dateFrom" />

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

    <script src="Scripts/moment.min.js"></script>

    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">

        $('#dateFrom').datetimepicker();

    </script>

</body>

</html>

运行，此时会有一个错误：

提示的意思是datetimepicker元素必须位于非固定位置的容器中，此时，在外面包裹一个style="position:relative"的div。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

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

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

</head>

<body>

    <div style="position:relative">

        <input type="text" id="dateFrom" />

    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

    <script src="Scripts/moment.min.js"></script>

    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">

        $('#dateFrom').datetimepicker();

    </script>

</body>

</html>

运行后，效果如下：

关于格式，一般我们需要的是年-月-日，可以通过配置实现：

$('#dateFrom').datetimepicker({

    format:'YYYY-MM-DD'

});

如果当前文本框为空，点击后弹出日历的同时，不想文本框赋值为当天，此时可以通过useCurrent:false实现：

如果日历需要本地化（使用中文），可以访问https://github.com/moment/moment/tree/develop/locale 链接下载对应的语言包（这里下载了zh-cn.js），存放到脚本所在的目录下：

添加对moment-with-locales.min.js的引用，配置里使用locale:'zh-cn'

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

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

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

</head>

<body>

    <div style="position:relative">

        <input type="text" id="dateFrom" />

    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

    <script src="Scripts/moment.min.js"></script>

    <script src="Scripts/moment-with-locales.min.js"></script>

    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">

        $('#dateFrom').datetimepicker({

            format: 'YYYY-MM-DD',

            useCurrent: false,

            locale: 'zh-cn'

        });

    </script>

</body>

</html>

两个日历联动，一个日历选择日期后，限制另一个日历可选日期的范围，使用dp.change事件。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

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

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

</head>

<body>

    <div style="position:relative">

        <input type="text" id="dateFrom" /> -

        <input type="text" id="dateTo" /> -

    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

    <script src="Scripts/moment.min.js"></script>

    <script src="Scripts/moment-with-locales.min.js"></script>

    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">

        $('#dateFrom,#dateTo').datetimepicker({

            format: 'YYYY-MM-DD',

            useCurrent: false,

            locale: 'zh-cn'

        });

        $('#dateFrom').on('dp.change', function(e) {

            $('#dateTo').data("DateTimePicker").minDate(e.date);

        });

        $('#dateTo').on('dp.change', function (e) {

            $('#dateFrom').data("DateTimePicker").maxDate(e.date);

        });

    </script>

</body>

</html>

参考资料：

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

http://eonasdan.github.io/bootstrap-datetimepicker/Events/

BootStrap DateTimePicker的使用的更多相关文章

  1. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  2. bootstrap datetimepicker 格式化yyyymmdd时，无法读取yyyymmdd格式

    不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...

  3. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

  4. bootstrap datetimepicker的参数解释

    使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...

  5. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  6. bootstrap datetimepicker 位置错误

    bootstrap datetimepicker 位置错误,大致问题跟其他网友描述的一样,页面自动出滚动条,然后datetimepicker飘到页脚,网上的方法都是修改place方法里面的555行左右 ...

  7. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  8. bootstrap datetimepicker时间日期控件

    github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...

  9. bootstrap datetimepicker 时间段选择限制

    <!DOCTYPE html> <html> <head> <title></title> <link href="./bo ...

随机推荐

  1. 【Collection、泛型】

    [Collection.泛型] 主要内容 Collection集合 迭代器 增强for 泛型 第一章 Collection集合 1.1 集合概述 集合:集合是java中提供的一种容器,可以用来存储多个 ...

  2. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  3. PostgreSQL Json字段作为查询条件案例

    业务扩展字段在数据库中经常会使用json格式的数据来存储,这就涉及到一个头疼的问题,假设要使用扩展字段里的某个值作为查询条件怎么办,原来PostgreSQL本身就支持这种查询方式. 例子:假设业务扩展 ...

  4. 树莓派安装vnc server并设置自启动

    在SSH终端输入sudo raspi-config, 这里需要打开几个选项: expand_rootfs – 将根分区扩展到整张SD卡; change_pass – 默认的用户名是pi,密码是rasp ...

  5. 从零开始学 Web 之 HTML（三）表单

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 第二篇：SpringBoot2.0整合ActiveMQ

    本篇开始将具体介绍SpringBoot如何整合其它项目. 如何创建SpringBoot项目 访问https://start.spring.io/. 依次选择构建工具Maven Project.语言ja ...

  7. Linux 定时任务 crontab 和 Systemd Timer

    一.说说八卦 ​ 说到定时任务,我们常用的就是 crond 服务,但是我们不知道还有另外一种定时方式,那就是 systemd,我们常用 systemd 来管理我们的服务,但是我们却不知道,我们还可以通 ...

  8. [译]ABP vNext介绍

    译者注 ASP.NET Boilerplate是.Net平台非常优秀的一个开源Web应用程序框架,在国内也有大量的粉丝. 近日, 本人在github上闲逛, 发现ASP.NET Boilerplate ...

  9. php防止刷流量攻击

    <?php //查询禁止IP $ip =$_SERVER['REMOTE_ADDR']; $fileht=".htaccess2"; if(!file_exists($fil ...

  10. spring-boot-2.0.3源码篇 - filter的注册，值得一看

    前言 开心一刻 过年女婿来岳父家走亲戚,当时小舅子主就问:姐夫,你什么时候能给我姐幸福,让我姐好好享受生活的美好.你们这辈子不准备买一套大点的房子吗?姐夫说:现在没钱啊!不过我有一个美丽可爱的女儿,等 ...