日期时间选择器

设计规范

开发者文档

datepicker

input[type=text]模式

使用javascript:

          
$('#demo1 input').datepicker({});

使用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"
});

这些参数也可以使用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属性

调用方法

$('.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的影响.

默认值为false,

          
//这里和正常的datepicker保持一致
$('#demo8 input').datepicker({
  timepicker:true,
  autoclose: false, //这里最好设置为false
});
comments powered byDisqus