2015

日历控件 使用说明文档

苏州苏大信息科技有限公司

文档修改历史记录

一、 配置项

1、 普通组件模版 <div class ="input-append<p><span> <p><span>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">

<i class ="icon-th"></i >

</div >

2、 带有重置按钮（用于清空输入框）的组件模版 <div class ="input-append<p><span> <p><span>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">

<i class ="icon-remove"></i >

<i class ="icon-th"></i >

</div >

二、 方法

1、 r emove

作用：移除日期时间选择器。同时移除已经绑定的event 、内部绑定的对象和HTML 元素 $('#datetimepicker').datetimepicker('remove' );

2、 s how

作用：显示日期时间选择器

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

3、 h ide

作用：隐藏日期时间选择器

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

4、 U pdate

作用：使用当前输入框中的值更新日期时间选择器

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

5、 s etStartDate

作用：给日期时间选择器设置一个新的起始日期 $('#datetimepicker').datetimepicker('setStartDate' , '2012-01-01' ); $('#datetimepicker').datetimepicker('setStartDate' );

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

6、 s etEndDate 作用：给日期时间选择器设置结束日期

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

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

三、 事件

1、 show

作用：当选择器显示时被触发

$('#datetimepicker').datetimepicker().on('show' , function (){});

2、 hide

作用：当选择器隐藏时被触发

$('#datetimepicker').datetimepicker().on('hide' , function (){});

3、 changeDate

作用：当日期被改变时被触发

$('#datetimepicker').datetimepicker().on('changeData' , function (){});

4、 changeYear

作用：当年份被改变时被触发

$('#datetimepicker').datetimepicker().on('changeYear' , function (){});

5、 changeMonth

作用：当月份被改变时被触发

$('#datetimepicker').datetimepicker().on('changeMonth' , function (){});

四、 案例

1、 可以定位当天时间

<label class ="control-label col-md-1 col-xs-1">初次领证日期</label >

<div class ="col-md-3 col-xs-3">

<div class ="input-group date form_datetime ">

<input id ="txtGetDate"class ="form-control"size ="16"type ="text"value =""readonly ="readonly"/>

<i class ="glyphiconglyphicon-calendar"></i >

</div >

</div >

2、 含有复位按钮

<label class ="control-label col-md-2 col-xs-2">*许可证有效期</label >

<div class ="col-md-4 col-xs-4">

<div class ="input-group date form_datetime ">

<input id ="txtPermitExpireDate"class ="form-control"size ="16"type ="text"value =""readonly />

<i class ="glyphiconglyphicon-remove"></i > <i class ="glyphiconglyphicon-calendar"></i ></spa n >

</div >

</div >