使用方法

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. odoo开发笔记 -- 多对多字段追加数据

    正常赋值操作: (以某个模型对象的附件为例) , , attach_ids)] 其中,attach_ids为附件对象id列表. 追加更新操作: 直接追加方式,没有找到;间接实现,每次更新前,去查询附件 ...

  2. webpack-loader是怎样炼成的

    目录 啰嗦两句 loader 是干什么的 loader 的工具箱 --context loader 实战 啰嗦两句 学习这件事从学习动机上来看,可以分成两种情况:主动学习和被动学习.主动学习就是,某天 ...

  3. mac下nginx搭建

    首先使用brew安装nginx brew install nginx 安装完毕后,如果我们要使用nginx监听本地的80端口,需要改掉mac自带的apache占用的80端口 sudo vim /etc ...

  4. MapReduce－深度剖析

    1.概述 在接触了第一代MapReduce和第二代MapReduce之后,或许会有这样的疑惑,我们从一些书籍和博客当中获取MapReduce的一些原理和算法,在第一代当中会有JobTrack,Task ...

  5. MapReduce业务 － 图片关联计算

    1.概述 最近在和人交流时谈到数据相似度和数据共性问题,而刚好在业务层面有类似的需求,今天和大家分享这类问题的解决思路,分享目录如下所示: 业务背景 编码实践 预览截图 下面开始今天的内容分享. 2. ...

  6. Mysql半同步复制模式说明及配置示例 - 运维小结

    MySQL主从复制包括异步模式.半同步模式.GTID模式以及多源复制模式,默认是异步模式 (如之前详细介绍的mysql主从复制).所谓异步模式指的是MySQL 主服务器上I/O thread 线程将二 ...

  7. 完整的一次 HTTP 请求响应过程（二）

    上篇文章 我们完整的描述了计算机五层模型中的『应用层』和『运输层』,阐述了较为复杂的 TCP 协议的相关原理,相信大家一定也有所收获,那么本篇将继续五层模型的学习. 网络层 『网络层』其实解决的就是一 ...

  8. 2017ACM/ICPC亚洲区沈阳站（部分解题报告）

    HDU 6225 Little Boxes 题意 计算四个整数的和 解题思路 使用Java大整数 import java.math.BigInteger; import java.util.Scann ...

  9. Scala函数与函数式编程

    函数是scala的重要组成部分, 本文将探讨scala中函数的应用. scala作为支持函数式编程的语言, scala可以将函数作为对象即所谓"函数是一等公民". 函数定义 sca ...

  10. [JZOJ5970] Space

    Description 在一个四维空间中,给 \(4\) 个 \(n\) 的排列 \(A,B,C,D\),对于点 \((x,y,z,w)\) ,到点 \((A_x,B_y,C_z,D_w)\) 的花费 ...