1.页面引入样式css
...
<link rel="stylesheet" href="LCalendar.css">
...
2.页面引入js
...
<script src="LCalendar.js"></script>
...
3.页面样式书写--在html页面中引入input标签,通过自定义属性data-lcalendar
控制最小日期和最大日期
...
<input type="text" readonly="" id="StartTime" name="input_date" placeholder="请输入日期" data-lcalendar="2000-01-01,2018-01-29" />
<input type="text" readonly="" id="EntTime" name="input_date" placeholder="请输入日期" data-lcalendar="2000-01-01,2018-01-29" />
...
4.在js中初始化插件:
...
var calendar = new LCalendar();
calendar.init({
'trigger': '#demo1',//标签id
'type': 'date',//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
'minDate':'1900-1-1',//最小日期 注意:该值会覆盖标签内定义的日期范围
'maxDate':'2016-3-18'//最大日期 注意:该值会覆盖标签内定义的日期范围
});
...
//LCalendar时间选择组件(当有开始和结束两个时间弹框选择,初始化两个)
LCalendar:function () {
var calendar = new LCalendar();
calendar.init({
'trigger': '#StartTime', //标签id
'type': 'date',
'minDate':currentTime(), //最小日期
'maxDate': endTime(), //最大日期
'clickcallback':function(date){
//回调
}
});
var calendardatetime = new LCalendar();
calendardatetime.init({
'trigger': '#EntTime',
'type': 'date',
'minDate':currentTime(),
'maxDate': endTime(), //最大日期
'clickcallback':function(date){
//回调
}
});
},