开发者文档
datepicker
- 更新 v1.4.2: 修复在合体模式下无法用 update 函数进行日期和时间的更新的bug
- 更新 v1.4.0: 此组件的css代码被移入了 sui-append.css 中
- 更新 v1.1.2: 修复了 date-date 模式下无法自动修正日期大小的问题。
- 更新 v1.0.3: 修复了当日历和时间同时选择时,无法读取input中初始化值的bug。
- 更新 v1.0.2: 修复了选择时间时,点击00或者59会导致日历发生错误的bug。
- 更新@2014-06-23:更新配置选项,size,可选择值为small,设置完毕后可使用较小尺寸的日期弹出框。
input[type=text]模式
使用javascript:
- <form id="demo1" class="sui-form">
- <input type="text">
- </form>
- $('#demo1 input').datepicker({size:"small"});
使用data-api:
- <input type="text" data-toggle="datepicker" value="2013-01-01">
div.input-prepend>input+span.add-on模式
注意: dom得加上class date
使用javascript:
- <form class="sui-form">
- <div id="demo2" class="input-prepend date"><span class="add-on">@</span>
- <input type="text" class="span2 input-fat">
- </div>
- </form>
- $('#demo2.date').datepicker({});
使用data-api:
- <form class="sui-form">
- <div data-toggle="datepicker" class="input-prepend date"><span class="add-on">@</span>
- <input type="text" class="span2 input-fat">
- </div>
- </form>
内嵌模式
使用javascript:
2025年 3月 | ||||||
---|---|---|---|---|---|---|
日 | 一 | 二 | 三 | 四 | 五 | 六 |
23 | 24 | 25 | 26 | 27 | 28 | 今日 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
- <div id="demo3"></div>
- $('#demo3').datepicker({});
使用data-api:
2025年 3月 | ||||||
---|---|---|---|---|---|---|
日 | 一 | 二 | 三 | 四 | 五 | 六 |
23 | 24 | 25 | 26 | 27 | 28 | 今日 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
- <div data-toggle="datepicker-inline"></div>
date - date 模式
注意: dom 加上class input-daterange
使用javascript:
- <form class="sui-form form-horizontal">
- <div id="demo4" class="control-group input-daterange">
- <label class="control-label">时间选择:</label>
- <div class="controls">
- <input type="text" class="input-medium input-date"><span>-</span>
- <input type="text" class="input-medium input-date">
- </div>
- </div>
- </form>
- $('#demo4.input-daterange').datepicker({
- beforeShowDay: function (date){
- if (date.getMonth() == (new Date()).getMonth())
- switch (date.getDate()){
- case 4:
- return {
- tooltip: 'Example tooltip',
- classes: 'active'
- };
- case 8:
- return false;
- case 12:
- return "green";
- }
- }
- });
使用data-api:
- <form class="sui-form form-horizontal">
- <div data-toggle="datepicker" class="control-group input-daterange">
- <label class="control-label">时间选择:</label>
- <div class="controls">
- <input type="text" class="input-medium input-date"><span>-</span>
- <input type="text" class="input-medium input-date">
- </div>
- </div>
- </form>
使用方法
js调用datepicker可以加入控制参数:
- $('#demo4').datepicker({
- startDate: "2014-04-16",
- data-date-format: "yyyy-mm-dd",
- size: "small"
- });
这些参数也可以使用data api 来传递:
比如 startDate 可以用 data-date-start-date="2014-04-16" , format 为 data-date-format="yyyy-mm-dd"
可配置项
名称 | 默认值 | 说明 |
---|---|---|
autoclose | true | 选择完日期是否自动关闭日期选择器,false/true |
calendarWeeks | false | 是否显示第几周 ,false/true |
todayHighlight | true | 是否高亮今天 |
keyboardNavigation | true | 是否允许键盘选择日期,fasle/true |
forceParse | true | 是否强制input中的value为标准日期格式 |
format | "yyyy-mm-dd" | 日期格式,用y代表年(2014)四个数字中的一个数字,同理 m-月,d-天 |
startView | 0 | 插件启动时显示的范围,0-显示一个月,1-显示一年,2-显示10年 |
minViewMode | 0 | 显示的最小日期,0-显示到天,1-显示到月,2-显示到年 |
todayBtn | false | 回到今天按钮,false-不启用,true-启用,"linked"-点击按钮回到今天并且选中今天 |
orientation | "auto" | 插件相对于输入框的位置,"auto/top/bottom auto/left/right",总共9这种组合,比如"top left"-左上角 |
startDate | -Infinity | 可选的最早时间,"2014-04-16" ,时间格式和format一致 |
endDate | Infinity | 可选的最远时间,"2014-04-16" ,时间格式和format一致 |
Multidate | false | 多选日期,可以填写数字,表示选择几个日期,比如 "2",可以输入2个日期 |
beforeShowDay | $.noop | 选择日的回调,function(date){return value}, typeof value == undefined -- 不会产生任何影响, typeof value == Boolean,是否选中当前日期, typeof value === String 作为css class,会被添加到插件当前日期上去 typeof value == object 可以有三个字段enabled,classes,tooltip。 enabled 和单独返回Booleen一样, classes和单独返回string一样, tooltip 会在插件上的当前日期添加一个title属性xian |
size | ' ' | 默认日期框尺寸为283*254,现在提供一种小尺寸,设置属性size为"small",尺寸为216*198 |
调用方法
- $('.datepicker').datepicker('method', arg1, arg2);
remove
参数:none
删除datepicker。会删除绑定的事件,内联对象,和添加的HTML
show
参数:none
显示datepicker
hide
参数:none
隐藏 datepicker
update
参数 date(String|Date,optional)
更新datepicker或者当前的input value
- $('.datepicker').datepicker('update');
- $('.datepicker').datepicker('update', '2011-03-05');
- $('.datepicker').datepicker('update', new Date(2011, 2, 5));
getDate / getDates
参数:none
返回当前日期/getDates用于多选模式下
setEndDate/setStartDate
参数:Date
设置起始/截止日期
绑定方式
- $('.datepicker').datepicker()
- .on(picker_event, function(e){
- // e 中包含有其他的字段
- });
- // date: Date object,在多选模式下回返回最新的选择的日期
- // dates: Array of Date objects
- // format([ix],[format]): 一个格式化时间的函数,ix 为在dates里的date的index,不填为最后一个。
- // format ,格式方式,如'yyyy-mm-dd'
show
当datepicker显示时触发
hide
当datepicker影藏时触发
changeDate
当日期更改时触发
changeYear/changeMonth
当展现的year/moth 被改变的时候触发
timepicker
input[type=text]模式
使用javascript:
- <form id="demo5" class="sui-form">
- <input type="text" value="12:12">
- </form>
- $('#demo5 input').timepicker();
使用data-api:
- <form id="demo5" class="sui-form">
- <input type="text" data-toggle="timepicker">
- </form>
div.input-prepend>input+span.add-on模式
注意: dom得加上class date
使用javascript:
- <form class="sui-form">
- <div id="demo6" class="input-prepend date"><span class="add-on">@</span>
- <input type="text" class="span2 input-fat">
- </div>
- </form>
- $('#demo2.date').timepicker();
使用data-api
- <form class="sui-form">
- <div data-toggle="timepicker" class="input-prepend date"><span class="add-on">@</span>
- <input type="text" class="span2 input-fat">
- </div>
- </form>
内联模式
注意: 这种模式下, 当前时间的位置是在调用timepicker()时就进行计算的.
因此如果在计算时, 如果timepicker的容器的是 display:none 的话,会导
致错误. 可以在当前容器为 visible 时, 调用 $('#dom').timepicker('show')
重新计算.
使用javascript:
- <div id="demo7"></div>
- $('#demo7').timepicker();
- $('#timepickerCont a').on('shown',function(){
- | $('#demo7').timepicker('show')
- });
使用data-api:
- <div data-toggle="timepicker-inline"></div>
减少接口数量, timepicker视作datepicker的可配置项, 这样datepicker的所有功能都会受到timepicker的影响.如果想通过dataapi来初始化,需要这样写 data-toggle='datepicker' data-date-timepicker='true'
.
默认值为false,
- <form id="demo8" class="sui-form">
- <input type="text" value="2014-03-02 12:48">
- </form>
- //这里和正常的datepicker保持一致
- $('#demo8 input').datepicker({
- timepicker:true,
- autoclose: false, //这里最好设置为false
- });