基于layDate的时间范围选择器
基于layDate的时间范围选择器
实现效果
使用layDate
获得 layDate 文件包后,解压并将 laydate 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 laydate.js 即可。具体参数配置可看文档介绍。
HTML
//
<body>
<td width="120" class="text_r"><label>创建时间:</label></td>
<td>
<input type="text" readonly="readonly" placeholder="开始时间" class="kxht_input cxtj" name="startTime" id="startTime"
/>至
<input type="text" readonly="readonly" placeholder="结束时间" class="kxht_input cxtj" name="endTime" id="endTime" />
</td>
</body>
js
//
<script src="laydate/laydate.js"></script>
<script type="text/javascript">
// 设置最大时间为当前时间
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
//开始时间时间
var start = laydate.render({
elem: '#startTime',
min: '1900-1-1 00:00:00',
max: getNowFormatDate(),
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //开始日选好后,重置结束日的最小日期
end.config.value = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //将结束日的初始值设定为开始日
}
});
//结束时间
var end = laydate.render({
elem: '#endTime',
min: '1900-1-1 00:00:00',
max: getNowFormatDate(),
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
console.log(start.config)
console.log(value)
console.log(date)
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //结束日选好后,重置开始日的最大日期
}
});
</script>