开始用的 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. linux使用pam_tally2.so模块限制登录3次失败后禁止5分钟

    在线上的服务器有时需要限制用户登录次数.这个功能可以通过pam的pam_tally2.so模块来实现 PAM模块是用sun提出的一种认证机制 pam_tally2.so模块 一.格式 pam_tall ...

  2. Tumblr 架构设计

    英文原文:The Tumblr Architecture Yahoo Bought For A Cool Billion Dollars 最近的新闻中我们得知雅虎11亿美元收购了Tumblr: Yah ...

  3. Ubunt 使用Virtualbox虚拟机NAT无法上网解决办法

    我的Ubuntu安装了一个Centos虚拟机,为了SSH和上外网的方便,使用了NAT+host Only方式,实现内网+外网,但是安装好的Centos不能连接外网,很是无语,只能Google了-- 解 ...

  4. 第三部分:Android 应用程序接口指南---第二节:UI---第二章 输入控件

    第2章 输入控件 输入控件是应用程序中用户接口的一种交互式组件.Android提供了大量的可供人们在UI中使用的控件,比如按钮.文本区域.(带滑块的)进度条.复选框.缩放按钮以及切换按钮等等. 在UI ...

  5. vue-worker的介绍和使用

    vue-worker把复杂的web worker封装起来,提供一套非常简明的api接口,使用的时候可以说像不接触worker一样方便.那么具体怎么使用呢? 安装 npm i -S vue-worker ...

  6. Socket网络编程--网络爬虫(3)

    上一小节我们实现了从博客园的首页获取一些用户的用户名,并保存起来.接下来的这一小节我将对每个用户名构建一个用户的博客主页,然后从这个主页获取所有能获取到的网页,网页的格式现在是http://www.c ...

  7. 【Ubuntu】PHP环境安装-phpstudy for linux版

    安装: wget -c http://lamp.phpstudy.net/phpstudy.bin chmod +x phpstudy.bin    #权限设置sudo ./phpstudy.bin ...

  8. tomcat启动时非常慢,启动时 一直卡在Root WebApplicationContext: initialization completed

    每次重启自己的服务tomcat都需要卡住很长时间,每次都是日志停在 Root WebApplicationContext: initialization completed in 744 ms这个地方 ...

  9. PCL中使用FLANN库(2)

    接着上一篇的介绍继续 关于在使用readHeader函数读取点云数据头的类型的代码(Read a point cloud data header from a PCD file.) pcl::PCLP ...

  10. .NET Memory Allocation Profiling with Visual Studio 2012

    .NET Memory Allocation Profiling with Visual Studio 2012 This post was written by Stephen Toub, a fr ...