开始用的 bootstrap日期选择控件是 bootstrap-datepicker :

$('#visit_date').datepicker({
todayHighlight: true,
startDate: '+1d',
format: 'yyyy/mm/dd',
language: 'zh-CN',
orientation: 'bottom right',
autoclose: 'true'
});

后来需要支持时间选择,改用了 eonasdan-bootstrap-datetimepicker

$('#visit_date').datetimepicker({
locale: 'zh-CN',
minDate: moment().add(1, 'days').hours(9).startOf('hour'),
format: 'YYYY/MM/DD hh:mm',
daysOfWeekDisabled: [1],
reenabledDates: ['2018-04-30', '2018-06-18', '2018-09-24', '2018-10-01'],
enabledHours: [9, 10, 11, 12, 13, 14, 15, 16, 17]
});

它是基于 momentjs 实现的。

locale 设置当前的语言。

minDate 设置允许选择的最早时间,比如上面的示例设置为第2天早上9:00。

format 日期时间格式(就是 momentjs 支持的格式),比如上面的示例格式对应的时间是 2018/01/10 09:00 。

daysOfWeekDisabled 禁止选择周几,比如上面的示例禁止选择周一。

enabledHours 限制可以选择的时间,比如上面的示例只允许选择 9:00 ~ 17:00 。

reenabledDates 是我修改源代码实现的(详见博问) ,允许选择被 daysOfWeekDisabled 禁止的日期,在 github 上提交 pull request 时才发现 Eonasdan 已另起炉灶。

This repo is no longer actively monitor or supported. All future work is being done to https://github.com/tempusdominus/bootstrap-3

Eonasdan bootstrap datetimepicker 使用记录的更多相关文章

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

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

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

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

  3. bootstrap datetimepicker 格式化yyyymmdd时,无法读取yyyymmdd格式

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

  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. BootStrap DateTimePicker的使用

    使用方法 1. 添加资源 2. 编写代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

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

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

  9. bootstrap datetimepicker时间日期控件

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

随机推荐

  1. [转]oracle 常用的指令

    1.显示当前用户名 select user from dual; show user 2.显示当然用户有哪些表 select * from tab; 3.显示当所有用户的表 select * from ...

  2. MySql按周,按月,按日分组统计数据

    知识关键词:DATE_FORMAT select DATE_FORMAT(create_time,'%Y%u') weeks,count(caseid) count from tc_case grou ...

  3. 配置Windows Server 2008/2012/2016允许2个用户同时远程桌面

    Windows Server 系列服务器默认情况下只能支持一个用户远程,如果第二个人远程上去之后会直接把前面一个登录用户踢掉.在日常工作中如果有多个人需要同时远程过去工作,会很不方面. 网上很多教程讲 ...

  4. Linux安装R记要

    R在Linux上的安装有一些坑(Windows上安装会方便许多),在这里记录,希望可以减少读者不必要的麻烦.我的服务器是SUSE Linux 64位,无法接入互联网(安全原因,你懂的). 到R官网ht ...

  5. IP子系统集成

    IP子系统集成 1.Creating External Connections 由此可以看出:block design的设计是可以连接电路板上的CPU的(外挂CPU). 2.生成外部接口 端口生成之后 ...

  6. 国外程序员整理的C++资源大全

    标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类和函数的集合,使用核心语言编写,也是C++ISO自身标准的一部分. Standard Tem ...

  7. vs2015打开慢的解决方法

        1.首先是这里,这里默认是用的软件加速,把"基于客户端性能自动调整视觉体验"去掉勾选.然后把下面的第一个选项去掉,第二选项勾选.我在想,它的"自动"基于 ...

  8. MVC的Membership

    摘自:http://stackoverflow.com/a/16734651/1616023 See the summaries below each quote for a quick answer ...

  9. (笔记)AT91SAM9260的启动过程详细解说

    Bootstrap的启动过程 一. 说明: Bootstrap启动代码是官方提供的一级启动代码,包括汇编和C语言两部分组成.对AT91SAM9260来说编译完成后,代码长度必须小于4KB,烧写到dat ...

  10. java 全组合 与全排列

    一.全组合 public static void Combination( ) { /*基本思路:求全组合,则假设原有元素n个,则最终组合结果是2^n个.原因是: * 用位操作方法:假设元素原本有:a ...