<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5移动端日期选择器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="LCalendar/css/LCalendar.css" />
</head>
<body>
<div class="main_page">
<div class="select_start_date">
<div class="start_date_left">
开始时间
</div>
<div class="start_date_right">
<input type="text" name="start_date" id="start_date" placeholder="选择开始日期" readonly="readonly" />
</div>
</div>
<div class="select_start_date">
<div class="start_date_left">
结束时间
</div>
<div class="start_date_right">
<input type="text" name="end_date" id="end_date" placeholder="选择开始日期" readonly="readonly" />
</div>
</div>
</div>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
<script src="LCalendar/js/LCalendar.js" type="text/javascript"></script>
<script type="text/javascript">
var calendar = new LCalendar();
calendar.init({
'trigger': '#start_date', //标签id
'type': 'ym', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
});
var calendar = new LCalendar();
calendar.init({
'trigger': '#end_date', //标签id
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
});
// $(function() {
// $('#start_date').date();
// $('#end_date').date();
// });
</script>
</html>
LCalendar.zip 很好的一个JS时间空间（修改版）
2星 需积分: 9 26 浏览量
2018-03-22
13:29:24
上传
评论
收藏 13KB ZIP 举报 
LCalendar.zip （6个子文件） 
LCalendar css 
index.css 3KB
index.html 2KB LCalendar css LCalendar.css 6KB LCalendar.min.css 4KB js LCalendar.js 37KB LCalendar.min.js 14KB资源评论
K.Jellen2018-08-29没有回调函数方法，不支持回调呀！冲着有事件来的，结果失望了。。。
kenhzs2018-09-05index.html文件中添加事件代码 calendar.addEventListener({trigger:'#start_date',type:'change'},function(){ console.log('这里可以做其他操作！'); }); kenhzs2018-09-05addEventListener:function(param,fn){ var item = ''; if(param.trigger){ item = document.querySelector(param.trigger); } if(param.type=='change'){ item.oninput = fn; } } 这个事件就是增加选中值更改后的回调函数
