1、点我下载
2、使用方法:
<!-- 日历1个css文件-->
<link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />
<!-- 日历1个js文件-->
<script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
3、demo:
<!DOCTYPE html >
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>报修</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/mend-detail-finished.css" rel="stylesheet">
<!-- 日历1个css文件-->
<link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />
<!--[if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<![endif]-->
<script src="../js/jQuery-1.9.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- 日历1个js文件-->
<script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//初始化LCalendar插件
$(function () {
//实例化一个LCalendar对象
var calendar = new LCalendar();
calendar.init({
'trigger': '#start_date', //标签id
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
});
//再实例化一个LCalendar对象
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 //最大日期
});
})
</script>
<style>
td{height: 45px;}
tr>td:first-child{border: 0;}
</style>
</head>
<body style="height: 100%">
<header>
<p>
<a class="back" href="javascript:;"></a>
<span>搜索</span>
</p>
</header>
<table class="my-table">
<tr>
<td width="30%">开始日期</td>
<td width="70%"><input type="text" id="start_date" class="date-right" readonly/></td>
</tr>
<tr>
<td width="30%">开始日期</td>
<td width="70%"><input type="text" id="end_date" class="date-right" readonly/></td>
</tr>
<tr>
<td width="30%">报修类别</td>
<td width="70%" class="img-right top" style="background-position: 95% center;position: relative;">
<span>总务后勤报修</span>
<ul class="select">
<li class="option">电教设备报修</li>
<li class="option">总务后台报修</li>
</ul>
</td>
</tr>
<tr>
<td width="30%">处理状态</td>
<td width="70%">
<span class="state-type active">待分派<i class="icon">√</i></span>
<span class="state-type">待维修<i class="icon">√</i></span>
<span class="state-type">已完成<i class="icon">√</i></span>
</td>
</tr>
<tr>
<td width="30%">维修人员</td>
<td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
<span>李波</span>
<a href="tel:123456" >
<img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
</a>
</td>
</tr>
<tr>
<td width="30%">维修人员</td>
<td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
<span>李波</span>
<a href="tel:123456" >
<img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
</a>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn-red" style="margin-top: 20px;margin-left: 30%;width: 70%;">开始搜索</button>
</td>
</tr>
</table>
<script >
//功能:设置第一个input值为30天前的日期,第二个input值为今天日期,
function getLastMonthYestdy(date){
var date = new Date(); // 1 2 3 4 5 6 7 8 9 10 11 12月
var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);
var strYear = date.getFullYear();
var strDay = date.getDate();
var strMonth = date.getMonth()+1;
if(strMonth<10)//给个位数的月、日补零
{
strMonth="0"+strMonth;
}
if(strDay<10)
{
strDay="0"+strDay;
}
now = strYear+"-"+strMonth+"-"+strDay;
if(strYear%4 == 0 && strYear%100 != 0){//一、解决闰年平年的二月份天数 //平年28天、闰年29天//能被4整除且不能被100整除的为闰年
daysInMonth[2] = 29;
}
if(strMonth - 1 == 0) //二、解决跨年问题
{
strYear -= 1;
strMonth = 12;
}
else
{
strMonth -= 1;
}
// strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth];
strDay = Math.min(strDay,daysInMonth[strMonth]);//三、前一个月日期不一定和今天同一号,例如3.31的前一个月日期是2.28;9.30前一个月日期是8.30
if(strMonth<10)//给个位数的月、日补零
{
strMonth="0"+strMonth;
}
if(strDay<10)
{
strDay="0"+strDay;
}
datastr = strYear+"-"+strMonth+"-"+strDay;
return datastr,now;
}
getLastMonthYestdy();
console.log(datastr);//必须确保日期格式为:YYYY-MM-DD
$("#start_date").val(datastr);//30天前的日期
$("#end_date").val(now);//今天日期
</script>
<script >
//显示
$(".img-right.top").click(function (e) {
e.stopPropagation();
$(".select").slideToggle();
});
//隐藏
$(document).click(function () {
$(".select").slideUp();
});
$(".option").click(function (e) {
//1、隐藏
e.stopPropagation();
$(this).parent().slideUp();
//2、赋值
var txt = $(this).text();
$(".img-right.top span").text(txt);
} )
</script>
<script >
//处理状态切换: 选中/未选中
$(".state-type").click(function () {
$(this).toggleClass("active");
})
</script>
</body>
</html>
4、效果图:
5、总结
该插件为轻量级,压缩后只有10k,而且样式可以很方便的自定义,可以设置初始值。其中的年月日,都能够很流畅的滚动。