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
今日
Clear

	2025
1月2月3月4月5月6月7月8月9月10月11月12月
今日
Clear

	2020-2029
201920202021202220232024202520262027202820292030
今日
Clear

<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
今日
Clear

	2025
1月2月3月4月5月6月7月8月9月10月11月12月
今日
Clear

	2020-2029
201920202021202220232024202520262027202820292030
今日
Clear

<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	' '	默认日期框尺寸为283254，现在提供一种小尺寸，设置属性size为"small"，尺寸为216198

调用方法

$('.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:

2122230001020304050607080910111213141516171819202122230001

5758590001020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758590001

<div id="demo7"></div>

$('#demo7').timepicker();
$('#timepickerCont a').on('shown',function(){
|    $('#demo7').timepicker('show')
});

使用data-api:

2122230001020304050607080910111213141516171819202122230001

5758590001020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758590001

<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
});

开发者文档

datepicker

timepicker

合体

datepicker

input[type=text]模式

div.input-prepend>input+span.add-on模式

内嵌模式

date - date 模式

使用方法

可配置项

remove

show

hide

update

getDate / getDates

setEndDate/setStartDate

show

hide

changeDate

changeYear/changeMonth

timepicker

input[type=text]模式

div.input-prepend>input+span.add-on模式

内联模式