项目:靴子-日期选择器

======================================

主页

演示页

项目叉

这个项目是一个叉子 拖网-取日期项目。 。 。 .

内容

由于“bootstrap-date pickers”仅限于日期范围(日、月、年),该项目也旨在支持时间选择(小时、分钟).

截图

十年展望

此视图允许选择选定月份的天数 .

年视图

此视图允许选择选定年份的月份 .

月视图

此视图允许在10年内选择年份.

日视

此视图允许选择选定日中的小时 .

小时视图

此视图允许选择选定小时的分钟预设 . 选择了5分钟(默认情况下)的范围,以将按钮数量限制在可接受的数值范围内,但可以用 minuteStep 属性.

日景 - 中风

日视和小时视都支持Meridian. 要使用它,只要让 showMeridian 属性.

小时视图 - 中线

示例

附加到通过选项指定格式的字段 :

<input type="text" value="2012-05-15 21:05" id="datetimepicker">

$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});

附加于带有通过标记指定格式的字段 :

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

$('#datetimepicker').datetimepicker();

作为组件 :

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

$('#datetimepicker').datetimepicker();

作为线性时间选择器 :

<div id="datetimepicker"></div>

$('#datetimepicker').datetimepicker();

使用拖带约会时间选择器。js

通过 Javascript 给采集日期的人打电话:

$('.datetimepicker').datetimepicker()

依赖关系

需要靴子的下拉组件(dropdowns.less对于一些风格,和靴子的宝石(sprites.less 和相关图像)用于箭头.

可以通过运行生成独立的.cs文件(包括必要的下拉样式和替代的以文本为基础的箭头) build/build_standalone.less 通过 lessc 编译器 :

$ lessc build/build_standalone.less datetimepicker.css

选项

使用“ 日期” 选项可以处理 Date 对象; 按照给定的格式排列字符串 format;或相对于今天的时间delta, 如"-1d","+6m+1y"等, 其中有效单位为"d"(日),"w"(周),"m"(月)和"y"(年).

您也可以指定 ISO- 8601 的有效日期,尽管给定的时间 format 数字 :

• yyy-mm-dd (英语)
• yyy-mm-dd 小时:ii
• yyy-mm-ddh:ii (英语)
• yyy-mm-dd hh:ii: ss (英语)
• yyy-mm-ddTh:ii:ssZ (英语:

格式

弦乐 默认 : 'mm/dd/yyyy'

日期格式,组合为p,P,h,h,i,ii,s,s,d,d,m,mm,M,MM,yy,yyy.

• p: 小写 ('am' 或'pm' ) 的介词 - 根据地语文件
• P : 大写相 ( “ AM ” 或 “ PM ” ) - 根据 locale 文件
• s: 不带正数的秒
• ss : 秒, 2 位数, 以 0 为首
• i: 分钟后不显示0
• (二) 分钟, 2 个数字, 以 0 为首
• h: 小时不带0 - 24小时格式
• hh : 小时, 2 位数, 以 0 为首 - 24小时格式
• H: 小时不导向零 - 12小时格式
• HH : 小时, 2 个数字, 以 0 为首 - 12 小时格式
• d:月日无正数
• dd: 月日, 2个数字, 以0为首
• m: 月的数值表示法,不带正数
• mm: 月份的数值表示法, 2 位数字, 以 0 为首
• M:一个月的简短文字表述,三个字母
• MM: 1月或3月的全文代表
• yy: 2位数字代表一年
• yyyy : 全年数字代表, 4位数

每周开始

整数. 默认: 0

周从一出. 0(星期天)至6(星期六)

开始日期

约会 默认: 时间开始

可能选择的最早日期;所有较早的日期都将被禁用.

结束日期

约会 默认: 时间结束

可能选择的最近日期; 以后所有日期将被禁用 .

周发残疾的日子

弦,阵列. 默认: '', []

应作残行之周日. 值为0(星期日)至6(星期六). 多个值应当以逗号分隔. 示例: 禁用周末: '0,6' 或者说 [0,6]。 。 。 .

自动关闭

布尔. 默认: 假

选择日期时是否立即关闭取日期器 .

开始查看

号码,字符串。 默认 : 2, “ 月 ”

摘取日期者应显示何时打开. 接受以下数值:

• 0 小时或小时视图
• 1 日或日视图
• 2 或月视图的 “ 月 ” (默认)
• 3年或“年份”12个月概览
• 4或"十年"为"十年概览". 对定出日期的选手有用.

分钟

号码,字符串。 默认: 0, '小时'

取日期者应显示的最低视图 .

最大视图

号码,字符串。 默认: 4, “十年”

摘取日期者应显示的最高视图.

今天Btn 时间

布尔,"链接"。 默认: 假

如果真或"链接",则在取日期的下方显示"今天"按钮来选择当前日期. 如果真实, “ 今天” 按钮将只将当前日期移动到视图中; 如果“ 链接” , 也将选择当前日期 .

今天的要闻

布尔. 默认: 假

如果选中, 请突出当前日期 .

键盘导航

布尔. 默认: 真

是否允许日期由箭头键导航 .

语言

弦乐 默认: “ en”

用于月份和日名的语言的双字母代码. 这些也会被作为输入值(然后在提交表单的情况下发送给服务器). 目前船舶有英文('en'),德文('de'),巴西文('br')和西班牙文('es')等译名,但其他可以添加(见下文I18N). 如果给出了未知的语言代码,则会使用英语.

强角

布尔. 默认: 真

采取器关闭时是否强制解析输入值 。 也就是说,当用户在输入字段中留下一个无效的日期时,拾取者会强制解析该值,并将输入值设定为新的有效日期,符合给定的日期 format。 。 。 .

靴子变速器

号码.

您可以使用此选项来覆盖不同靴子版本(例如2或3)的自动检测功能.

分钟步骤

号码。 默认: 5

用于构建小时视图的增量. 为每个创建按钮 minuteStep 几分钟.

参考文件:已贬值

弦乐 默认: “ 默认 ”

用于执行组件的取取器的参考元素。 如果您想要将拾取器放在输入字段下, 请指定 input。 。 。 .

拾取器

弦乐 默认 : “ 从下到右” (支持的值为:“ 从下到右” 、 “ 从下到左” 、 “ 从上到右” 、 “ 从上到左” )

此选项允许将拾取器放在组件执行的输入字段之下, 而不是按钮右下方的默认位置 .

视图选择

数字或字符串。 默认 : same as minView (支持的值有:"十年","年","月","日","小时")

您可以使用此选项选择选择日期的视图 。 默认是最后一个,不过你可以选择第一个,所以每次点击都会更新日期.

显示梅里迪亚语Name

布尔. 默认: 假

此选项将允许在白天和小时查看中线视图 .

初始日期

约会或字符串。 默认: 新日期( )

你可以以日期来初始化观众. 默认是现在,所以你可以指定 昨天或今天午夜...

zindex 数据

号码。 默认: 未定义

zIndex值正在基于 DOM 树自动计算,我们在此寻求最高值。 要跳过此进程, 您可以手动设定值 .

打开

在取枣者体内制造出一天后,该事件即被发射. 应还弦. 返回“ 残疾” 以禁用被选中的一天 .

$('#date-end')
    .datetimepicker({
        onRender: function(date) {
            return ev.date.valueOf() < date-start-display.valueOf() ? ' disabled' : '';
        }
    });

字体优美

布尔. 默认: 假

如果真是这样, 字体帅呆了 将被使用.

标记

格式为组件.

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

格式为组件并重置按钮以清除输入字段.

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

方法

. 日期时间选择( 选项)

初始化约会时间选择器 .

删除

参数: 无

删除取出日期的时间 。 删除附带事件、内附对象,以及 添加了 HTML 元素.

$('#datetimepicker').datetimepicker('remove');

显示

参数: 无

显示取日期者.

$('#datetimepicker').datetimepicker('show');

隐藏

参数: 无

藏取出日期者.

$('#datetimepicker').datetimepicker('hide');

更新

参数 :

• 当前日期( 日期) .

以指定日期更新取出日期的时间 .

$('#datetimepicker').datetimepicker('update', new Date());

关闭当前 Date 以当前输入值更新取日期器 .

$('#datetimepicker').datetimepicker('update');

设定开始日期

参数 :

• 开始日期( 字符串)

设置日期选择器的新下限日期.

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

Omit start Date(或提供假值)来取消限制.

$('#datetimepicker').datetimepicker('setStartDate');
$('#datetimepicker').datetimepicker('setStartDate', null);

设置结束日期

参数 :

• 结束日期( 字符串)

设置日期选择器的新的上限日期.

$('#datetimepicker').datetimepicker('setEndDate', '2012-12-31');

Omit endDate(或提供假值)来取消限制.

$('#datetimepicker').datetimepicker('setEndDate');
$('#datetimepicker').datetimepicker('setEndDate', null);

设置周出残废

参数 :

• (String-Q-Array) Week Disabled 的日子

设定禁用周日 .

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

Omit days OfWeek Disabled(或提供假值)来解除残废日.

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);

设置

参数 :

• 分钟已失效( String-% 箭头)

设定应禁用的分钟.

$('#datetimepicker').datetimepicker('setMinutesDisabled', [25,59]);

关闭分钟 关闭( 或提供假值) 以取消禁用分钟 .

$('#datetimepicker').datetimepicker('setMinutesDisabled');
$('#datetimepicker').datetimepicker('setMinutesDisabled', null);

设置障碍

参数 :

• 小时 残疾( String- 箭头)

设定应当禁用的时间.

$('#datetimepicker').datetimepicker('setHoursDisabled', [12,19]);

关闭时数 关闭时数( 或提供假值) 关闭时数 .

$('#datetimepicker').datetimepicker('setHoursDisabled');
$('#datetimepicker').datetimepicker('setHoursDisabled', null);

活动

取日期课会曝光一些操纵日期的事件.

显示

显示取枣器时被放出 .

隐藏

取枣者入藏后被放出.

更改日期

更改日期时被开除.

$('#date-end')
    .datetimepicker()
    .on('changeDate', function(ev){
        if (ev.date.valueOf() < date-start-display.valueOf()){
            ....
        }
    });

年份变化

发射时 视图 这一年与十年观点不同.

每月更改

发射时 视图 月由年视取而更之.

离线

当你选择日期之前 开始日期 或于 结束日期 或者当您通过该方法指定日期时 日期 或者说 设置UTCDate.

下一个: * / prov: *

点击时已开火 下一个 或者说 上一个 箭头. 支持所有不同视图模式( “年”、“ 月”、“ 日”、“ 小时” ) 。 例如允许您绑定回调到“ 下个月 ” 或“ prev: month ” 动作 .

键盘支持

取出日期的时间包括一些键盘导航:

上,下,左,右箭头键

单靠自己,左/右会向后/向后移动一天,上/向下移动一周.

以转会键,上/左会向后移动一个月,下/右会向前移动一个月.

用 Ctrl 键,上/左会往后移动一年,下/右会往后移动一年.

Shift+ctrl行为与ctrl相同——也就是说,它不会同时改变月份和年份,只有年份.

逃脱

逃生密钥可用于隐藏并重新显示取出日期的取出者;如果用户想要手动编辑值,则有必要这样做.

输入

当采取器可见时,输入会简单地隐藏. 当采取器不可见时,输入会有正常效果-提交当前形式等.

鼠标轮视图导航

为了使这个插件更容易设置不同部分的日期时间,鼠标轮被用来通过不同视图来导航. 卷起你的鼠标轮 导航到十年景点。 向下滚动会导致分钟的取景.

依赖性

来标注这个特性. 查询鼠标轮盘插件 在使用此特性之前必须包含.

选项

轮式维ewMode导航

布尔. 默认: 假

是否允许使用鼠标轮通过不同视图模式进行导航 .

轮子View ModeNavigation 逆向方向

布尔. 默认: 假

是否逆向滚动方向. 默认滚动至十年视图 .

轮子ViewModeNavigation 延迟

整数. 默认: 100

下回回向轮命令之间的时间延迟,它控制了在不同视图中切换之间的速度. 单位在百万秒.

关于视图选择选项

当启用此特性时, 视图选择选项的建议值为 4 。 这意味着你可以轻松更新每个视图中的任何值. 此选项值在演示页中应用 .

特性演示

很简单 演示 页面是用来显示它的简单的想法.

编号 18N

插件支持 i18n 的月份和工作日名称以及 weekStart 选项。 默认为英文('en');其他可用的译名可在 js/locales/ 目录,只需在插件后包含您想要的地方。 要添加更多语言,只需在 $.fn.datetimepicker.dates在打电话之前 .datetimepicker()示例:

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

您可以使用 format 属性. 示例

$.fn.datetimepicker.dates['pt-BR'] = {
    format: 'dd/mm/yyyy'
};

从右到左的语言也可以包括: rtl: true 以适当显示日历.

如果您的浏览器( 或用户的浏览器) 显示字符错误, 浏览器有可能在加载非 Unicode 编码的 javascript 文件 。 简单添加 charset="UTF-8" 给您的 script 标签 :

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