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">
日历控件
初一
议论文
2638字
76人浏览
慕容云云烽火