开始用的 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. 安装 scws出现 autoconf 需要先安装

    安装在终端操作, curl -OL http://ftpmirror.gnu.org/autoconf/autoconf-latest.tar.gz tar xzf autoconf-latest.t ...

  2. 浅析Sql Server参数化查询

    说来惭愧,工作差不多4年了,直到前些日子被DBA找上门让我优化一个CPU占用很高的复杂SQL语句时,我才突然意识到了参数化查询的重要性. 相信有很多开发者和我一样对于参数化查询认识比较模糊,没有引起足 ...

  3. 关于tomcat不同版本的maxPostSize

    tomcat7.0.63之前: maxPostSize The maximum size in bytes of the POST which will be handled by the conta ...

  4. 审核流(1)SNF.WorkFlow审核流简介--SNF快速开发平台3.1

    本项目是的在Spring.Net.Framework 平台之上进行研发.SNF.WorkFlow审核流是一款完全自主知识产权研发的为软件项目. 审核流基本概念:什么是审核流? 审核流:两个或两个以上的 ...

  5. request.GetResponse()超时的解决办法

    var request = (HttpWebRequest)WebRequest.Create(url); request.Timeout = Timeout.Infinite; request.Ke ...

  6. DIOCP-DIOCPv5的处理能力

    今天和BB讨论了下DiocpV5的单连接处理能力.一直没有做过这方面的测试,稍微试了一下. 把开始的时候客户端Sleep(10),为了测试处理能力,把Sleep(10)去掉了,20秒(实际应该算17秒 ...

  7. Geany的"跳转到标记定义“功能如何使用

    Geany是个比较轻量级的代码编辑器,在一些不怎么需要编辑的代码上,我比较常用它来浏览代码.不过它的 跳转到标记定义(Go to tag definition) 功能有点奇怪,一开始死活不知道怎么用, ...

  8. 【转载】Ubuntu安装之,硬盘分区

    关于分区 如果你只是简单地想用上Ubuntu,可以这样操作:1)如果你是直接将整个硬盘都用来装Ubuntu,机器上没有需要保存的数据,或者已经做好备份的情况下,可以直接在Ubuntu分区时选择“向导─ ...

  9. C# 反射总结 获取 命名空间 类名 方法名

    一.获取 命名空间 类名 方法名 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  10. Ubuntu14.04下安装MATLAB后,通过命令行打开其图形界面

    安装的是Matlab R2017a,使用的是默认安装目录,安装在目录/usr/local/MATLAB/R2017a/bin中.那么安装完成之后系统不会给Matlab添加系统路径,只有把终端切换到安装 ...