开始用的 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. SpringCloud Stream生产者配置RabbitMq的动态路由键

    在写这个文章前不得不吐槽目前国内一些blog的文章,尽是些复制粘贴的文章,提到点上但没任何的深入和例子.......... 经过测试下来总结一下RabbitMQ的Exchange的特性: 1.dire ...

  2. iOS开源项目之日志框架CocoaLumberjack

    CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.CocoaLumberjack类似于流行的日志框架(如log4j),但它是专为Objective-C设计的 ...

  3. Adobe Photoshop CC2019中文破解版

    今天突发兴致玩PS, 之前安装的是CS6, 下载安装色相环插件后 先采用拷贝文件夹的方式将Coolorus放到plug-in下, 重启发现窗口>扩展程序 这项是灰色的. 于是采用安装coolor ...

  4. linux下open和fopen的区别

    二者返回值不同. fopen可以指定宽字符和ASCI.

  5. Swift 弱引用与无主引用

    前言 Swift 提供了两种解决循环引用的方法,弱引用和无主引用. 弱引用和无主引用可以使循环中的一个实例引用另一个实例时不使用强引用. 1.弱引用 对生命周期中会变为 nil 的实例采用弱引用,也就 ...

  6. Kriging插值法

    克里金法是通过一组具有 z 值的分散点生成估计表面的高级地统计过程.与插值工具集中的其他插值方法不同,选择用于生成输出表面的最佳估算方法之前,有效使用克里金法工具涉及 z 值表示的现象的空间行为的交互 ...

  7. Linux说明书 - man浅谈

    原文链接: http://www.cnblogs.com/xuxn/archive/2011/08/26/linux-manual-man-command.html 所有学过Linux的同学都应该知道 ...

  8. 入门:移动APP中的各种导航

    即使是移动应用界面的原型设计,导航的形式也可以多种多样.尽管尺寸小,又必须紧凑排列大量数据,它们似乎受到了紧密的约束,但依然有着形形色色的选择. 人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导 ...

  9. Android Studio原生库创建示例

    [时间:2017-07] [状态:Open] [关键词:Android,Android Studio,gradle,native,c,c++,cmake,原生开发] 0 引言 最近在工作中遇到了升级A ...

  10. Android Launcher分析和修改3——Launcher启动和初始化

    前面两篇文章都是写有关Launcher配置文件的修改,代码方面涉及不多,今天开始进入Launcher代码分析. 我们开机启动Launcher,Launcher是由Activity Manager启动的 ...