开发者文档
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:
$('#demo1 input').datepicker({size:"small"});
使用data-api:
div.input-prepend>input+span.add-on模式
注意: dom得加上class date
使用javascript:
$('#demo2.date').datepicker({});
使用data-api:
内嵌模式
使用javascript:
$('#demo3').datepicker({});
使用data-api:
date - date 模式
注意: dom 加上class input-daterange
使用javascript:
$('#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:
使用方法
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:
$('#demo5 input').timepicker();
使用data-api:
div.input-prepend>input+span.add-on模式
注意: dom得加上class date
使用javascript:
$('#demo2.date').timepicker();
使用data-api
内联模式
注意: 这种模式下, 当前时间的位置是在调用timepicker()时就进行计算的.
因此如果在计算时, 如果timepicker的容器的是 display:none 的话,会导
致错误. 可以在当前容器为 visible 时, 调用 $('#dom').timepicker('show')
重新计算.
使用javascript:
$('#demo7').timepicker();
$('#timepickerCont a').on('shown',function(){
| $('#demo7').timepicker('show')
});
使用data-api:
减少接口数量, timepicker视作datepicker的可配置项, 这样datepicker的所有功能都会受到timepicker的影响.如果想通过dataapi来初始化，需要这样写 data-toggle='datepicker' data-date-timepicker='true'.
默认值为false,
//这里和正常的datepicker保持一致
$('#demo8 input').datepicker({
timepicker:true,
autoclose: false, //这里最好设置为false
});