关于bootstrap-datetimepicker 插件的配置参数详解

本人在网上查找的，  觉得还不错，就抄过来了... 有错误大家一起讨论，谢谢...

原地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/

项目 

此项目是bootstrap-datetimepicker 项目 的一个分支，原项目不支持 Time 选择。
其它部分也进行了改进、增强，例如load 过程增加了对 ISO-8601 日期格式的支持。
文档是拷贝/粘贴字原项目的文档，并且加入了更多细节说明。

别犹豫了，下载下来试试吧 !

下载 ZIP 包

此地址可以克隆或fork本项目

  1. git clone git://github.com/smalot/bootstrap-datetimepicker.git

希望这个小小的项目能帮到你 !

Tags: twitter-bootstrap, datetime, picker, component, javascript, widget

截图

十年视图

年视图

月视图

日视图*

小时视图 *

Day view w/ meridian *

Hour view w/ meridian *

(*) Added views to select the time part.

依赖

需要bootstrap的下拉菜单组件 (dropdowns.less) 的某些样式，还有bootstrap的sprites (sprites.less and associated images) 中的箭头图标。

A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by runningbuild/build_standalone.less through the lessc compiler:

  1. $ lessc build/build_standalone.less datetimepicker.css

选项

所有需要"Date" 的选项都可以处理Date 对象; a String formatted according to the given format; or a timedelta relative to today, eg ‘-1d‘, ‘+6m +1y‘, etc, where valid units are ‘d‘ (day), ‘w‘ (week), ‘m‘ (month), and ‘y‘ (year).

你也可以指定一个符合 ISO-8601 格式的日期时间，就可以忽略下面的格式：

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-ddThh:ii
  • yyyy-mm-dd hh:ii:ss
  • yyyy-mm-ddThh:ii:ssZ

format

String. 默认值: ‘mm/dd/yyyy‘

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

  • p : meridian in lower case (‘am‘ or ‘pm‘) - according to locale file
  • P : meridian in upper case (‘AM‘ or ‘PM‘) - according to locale file
  • s : seconds without leading zeros
  • ss : seconds, 2 digits with leading zeros
  • i : minutes without leading zeros
  • ii : minutes, 2 digits with leading zeros
  • h : hour without leading zeros - 24-hour format
  • hh : hour, 2 digits with leading zeros - 24-hour format
  • H : hour without leading zeros - 12-hour format
  • HH : hour, 2 digits with leading zeros - 12-hour format
  • d : day of the month without leading zeros
  • dd : day of the month, 2 digits with leading zeros
  • m : numeric representation of month without leading zeros
  • mm : numeric representation of the month, 2 digits with leading zeros
  • M : short textual representation of a month, three letters
  • MM : full textual representation of a month, such as January or March
  • yy : two digit representation of a year
  • yyyy : full numeric representation of a year, 4 digits

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

startDate

Date. 默认值：开始时间

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默认值：结束时间

The latest date that may be selected; all later dates will be disabled.

daysOfWeekDisabled

String, Array. 默认值: ‘‘, []

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: ‘0,6‘ or [0,6].

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值：2, ‘month‘

日期时间选择器打开之后首先显示的视图。 可接受的值：

  • 0 or ‘hour‘ for the hour view
  • 1 or ‘day‘ for the day view
  • 2 or ‘month‘ for month view (the default)
  • 3 or ‘year‘ for the 12-month overview
  • 4 or ‘decade‘ for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, ‘hour‘

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值：4, ‘decade‘

日期时间选择器最高能展示的选择范围视图。

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

keyboardNavigation

Boolean. 默认值: true

是否允许通过方向键改变日期。

language

String. 默认值: ‘en‘

The two-letter code of the language to use for month and day names. These will also be used as the input‘s value (and subsequently sent to the server in the case of form submissions). Currently ships with English (‘en‘), German (‘de‘), Brazilian (‘br‘), and Spanish (‘es‘) translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.

forceParse

Boolean. 默认值: true

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。

pickerReferer : 不建议使用

String. 默认值: ‘default‘ (other value available : ‘input‘)

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

String. 默认值: ‘bottom-right‘ (还支持 : ‘bottom-left‘)

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。

viewSelect

Number or String. 默认值: same as minView (supported values are: ‘decade‘, ‘year‘, ‘month‘, ‘day‘, ‘hour‘)

With this option you can select the view from which the date will be selected. By default it‘s the last one, however you can choose the first one, so at each click the date will be updated.

showMeridian

Boolean. 默认值: false

This option will enable meridian views for day and hour views.

initialDate

Date or String. 默认值: new Date()

You can initialize the viewer with a date. By default it‘s now, so you can specify yesterday or today at midnight ...

标记

组件模版。

  1. <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  2. <input class="span2" size="16" type="text" value="12-02-2012">
  3. <span class="add-on"><i class="icon-th"></i></span>
  4. </div>

带有重置按钮（用于清空输入框）的组件模版。

  1. <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  2. <input class="span2" size="16" type="text" value="12-02-2012">
  3. <span class="add-on"><i class="icon-remove"></i></span>
  4. <span class="add-on"><i class="icon-th"></i></span>
  5. </div>

方法

.datetimepicker(options)

初始化日期时间选择器。

remove

参数: None

移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

  1. $(‘#datetimepicker‘).datetimepicker(‘remove‘);

show

参数: None

显示日期时间选择器。

  1. $(‘#datetimepicker‘).datetimepicker(‘show‘);

hide

参数: None

隐藏日期时间选择器。

  1. $(‘#datetimepicker‘).datetimepicker(‘hide‘);

update

参数: None

使用当前输入框中的值更新日期时间选择器。

  1. $(‘#datetimepicker‘).datetimepicker(‘update‘);

setStartDate

参数:

  • startDate (String)

给日期时间选择器设置一个新的起始日期。

  1. $(‘#datetimepicker‘).datetimepicker(‘setStartDate‘, ‘2012-01-01‘);

Omit startDate (or provide an otherwise falsey value) to unset the limit.

  1. $(‘#datetimepicker‘).datetimepicker(‘setStartDate‘);
  2. $(‘#datetimepicker‘).datetimepicker(‘setStartDate‘, null);

setEndDate

参数:

  • endDate (String)

给日期时间选择器设置结束日期。

  1. $(‘#datetimepicker‘).datetimepicker(‘setEndDate‘, ‘2012-01-01‘);

Omit endDate (or provide an otherwise falsey value) to unset the limit.

  1. $(‘#datetimepicker‘).datetimepicker(‘setEndDate‘);
  2. $(‘#datetimepicker‘).datetimepicker(‘setEndDate‘, null);

setDaysOfWeekDisabled

参数:

  • daysOfWeekDisabled (String|Array)

Sets the days of week that should be disabled.

  1. $(‘#datetimepicker‘).datetimepicker(‘setDaysOfWeekDisabled‘, [0,6]);

Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.

  1. $(‘#datetimepicker‘).datetimepicker(‘setDaysOfWeekDisabled‘);
  2. $(‘#datetimepicker‘).datetimepicker(‘setDaysOfWeekDisabled‘, null);

事件（Events）

Datetimepicker 类暴露了一组event用以对日期进行操作。

show

当选择器显示时被触发。

hide

当选择器隐藏时被触发。

changeDate

当日期被改变时被触发。

  1. $(‘#date-end‘)
  2. .datetimepicker()
  3. .on(‘changeDate‘, function(ev){
  4. if (ev.date.valueOf() < date-start-display.valueOf()){
  5. ....
  6. }
  7. });

changeYear

当十年视图上的年视图view被改变时触发。

changeMonth

当年视图上的月视图view被改变时触发。

outOfRange

当用户选择的日期超出startDate 或endDate 时，或者通过setDate 或 setUTCDate方法设置日期超出范围时被触发。

键盘支持

日期时间选择器提供了键盘导航：

up, down, left, right 方向键

这些方向键中，left/right 向后/向前 一天，up/down 向后/向前 一周。

配合shift键，up/left 向后退一个月，down/right 向前进一个月。

配置ctrl键，up/left 向后退一年，down/right 向前进一年。

Shift+ctrl 和 ctrl 同等效果 - 也就是说，他们不能同时改变月和年，只能单独改变年。

escape

escape 键可以用来隐藏、重新显示日期时间选择器；当用户希望手工编辑输入框中的值是会很有用。

enter

当选择器处于显示状态时，enter键只是将其隐藏。当选择器处于隐藏状态时，enter键发挥通常的功能 - 提交当前表单，或者其他。

I18N国际化

本插件支持月、每周中天的名称、weekStart选项的国际化。默认是语言是English (‘en‘);其它可以使用的翻译文件在js/locales/ 目录中，只需在本插件之后引入需要的语言文件即可。需要增加额外语言支持的话，只需向 $.fn.datetimepicker.dates中增加一个key即可，一定要放在调用 .datetimepicker()之前。如下案例：

  1. $.fn.datetimepicker.dates[‘en‘] = {
  2. days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  3. daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  4. daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  5. months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  6. monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  7. today: "Today"
  8. };

Right-to-left languages may also include rtl: true to make the calendar display appropriately.

If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding. Simply add charset="UTF-8" to your script tag:

  1. <script type="text/javascript" src="bootstrap-datetimepicker.de.js" charset="UTF-8"></script>

使用

绑定输入框，并设置format选项：

  1. <input type="text" value="2012-05-15 21:05" id="datetimepicker">
  1. $(‘#datetimepicker‘).datetimepicker({
  2. format: ‘yyyy-mm-dd hh:ii‘
  3. });

绑定输入框，并设置format标记：

  1. <input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
  1. $(‘#datetimepicker‘).datetimepicker();

作为组件使用：

  1. <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  2. <input size="16" type="text" value="12-02-2012" readonly>
  3. <span class="add-on"><i class="icon-th"></i></span>
  4. </div>
  1. $(‘#datetimepicker‘).datetimepicker();

作为内联日期时间选择器：

  1. <div id="datetimepicker"></div>
    1. $(‘#datetimepicker‘).datetimepicker();
时间： 2024-10-23 00:47:26

关于bootstrap-datetimepicker 插件的配置参数详解的相关文章

jquery的uploadify插件多文件上传配置参数详解

最近做了个多文件上传,需要限制上传文件类型的例子.以前没做过找了一些资料,下次有用.同时也给大家做参考. uploader: uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. script: 后台处理程序的相对路径 .默认值:uploadify.php checkScript:用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径 fileDataName:设置一个名字,在服务器处理

nginx配置参数详解

配置参数详解 user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍于CPU. error_log  logs/error.log;  error_log  logs/error.log  notice;  error_log  logs/error.log  info;  错误日志:存放路径. pid logs/nginx.pid; pid(进程标识符):存放路径

eAccelerator 配置参数详解

eAccelerator 配置参数详解 eaccelerator.shm_size="32" eAccelerator 可以使用的共享内存的数量 (以兆为单位) . "0" 是指操作系统的默认值. 默认值是 "0".可根据服务器的实际情况来调整,16,32,64,128都是可以的. eaccelerator.cache_dir="/home/php/tmp" 这个目录是给磁盘缓存使用. eAccelerator 在这里储存预先

zookeeper的配置参数详解（zoo.cfg）

配置参数详解(主要是%ZOOKEEPER_HOME%/conf/zoo.cfg文件) 参数名 说明 clientPort 客户端连接server的端口,即对外服务端口,一般设置为2181吧. dataDir 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这里.建议同时配置参数dataLogDir, 事务日志的写性能直接影响zk性能. tickTime ZK中的一个时间单元.ZK中所有时间都是以这个时间单元为基础,进行整数倍配置的.例如,session的最小超时时间是2*tic

Mysql 配置参数详解以及优化配置

mysql有以下几种日志: 错误日志:   log-err 查询日志:   log 慢查询日志:  log-slow-queries 更新日志:   log-update 二进制日志: log-bin 要把日志生成在 /var/log 目录下(是系统日志存放的地方,只有 root 账号有写权限),需要 MySQL进程对这个目录有读写权限,一般是不这么做的,也考虑到安全问题,包括 MySQL 本身的数据安全,因为对 MySQL 的所有操作,都会记录到常规查询日志.MySQL的日志就不要用 /var

reids配置参数详解

转自:http://www.jb51.net/article/60627.htm reids配置参数详解 #daemonize no  默认情况下, redis 不是在后台运行的,如果需要在后台运行,把该项的值更改为 yes daemonize yes #  当 redis 在后台运行的时候, Redis 默认会把 pid 文件放在 /var/run/redis.pid ,你可以配置到其他地址. #  当运行多个 redis 服务时,需要指定不同的 pid 文件和端口 pidfile /var/

MHA实现mariadb的高可用的详细步骤及配置参数详解

MHA实现mariadb的高可用的详细步骤及配置参数详解 A. 实验环境说明 a) 4台centos7主机 b) 角色说明: a. MHA:192.168.36.35 b. Master_mariadb:192.168.36.121 c. Slave_mariadb:192.168.36.120 d. Slave_mariadb:192.168.36.27 B. 安装程序包 a) mariadb上安装: mariadb-server 版本:5.5.60 mha4mysql-node -0.56-

samba 配置参数详解

samba 配置参数详解: 一.全局配置参数  workgroup = WORKGROUP说明:设定 Samba Server 所要加入的工作组或者域. server string = Samba Server Version %v说明:设定 Samba Server 的注释,可以是任何字符串,也可以不填.宏%v表示显示Samba的版本号. netbios name = smbserver说明:设置Samba Server的NetBIOS名称.如果不填,则默认会使用该服务器的DNS名称的第一部分

Nginx主配置参数详解，Nginx配置网站

1.Niginx主配置文件参数详解 a.Linux中安装nginx.博文地址为:http://www.cnblogs.com/cindy-cindy/p/6847499.html b.当Nginx安装完毕后,会有相应的安装目录,安装目录里的nginx.confg为nginx的主配置文件,nginx主配置文件分为4部分,main(全局配置).server(主机配置).upstream(负载均衡服务器设置)以及location(URL匹配特定位置的设置),这四者的关系是:server继承main,l