这次给大家带来js里特别好用的轻量级日期插件，使用js里特别好用轻量级日期插件的注意事项有哪些，下面就是实战案例，一起来看一下。
jquery的日期插件有好几款，h5中的input也可以自带日期选择。但为什么要再写一个，有两个理由，一个是引用的文件太大，而有时候只需要很简单的功能，二个是想加一些自定义的效果不好改。
我写的这个功能比较简单，可以换月，有预约效果，可以设定预约日期范围，压缩后1.4kb，先上个图，再慢慢解释：
js代码：
$.fn.datebox = function (options) { var config = {
$valueele: $(#outputtime),
$prev: $(.datetitle #up),
$next: $(.datetitle #down),
mindate:null,
maxdate:null,
}
config = $.extend(config, options);
date.prototype.format = function (format) { var o = { m+: this.getmonth() + 1, //month
d+: this.getdate(), //day
h+: this.gethours(), //hour
m+: this.getminutes(), //minute
s+: this.getseconds(), //second
q+: math.floor((this.getmonth() + 3) / 3), //quarter
s: this.getmilliseconds() //millisecond } if (/(y+)/.test(format))
format = format.replace(regexp.$1,
(this.getfullyear() + ).substr(4 - regexp.$1.length)); for (var k in o) if (new regexp(( + k + )).test(format))
format = format.replace(regexp.$1,
regexp.$1.length == 1 ? o[k] :
(00 + o[k]).substr(( + o[k]).length)); return format;
}; var self = this; var $ele = $(this);
var maxdate,mindate;
var nstr = new date();
var ynow = nstr.getfullyear();
var mnow = nstr.getmonth();
var dnow = nstr.getdate();
if(!config.mindate){
mindate=nstr;
}else{
mindate=new date(config.mindate)
}
if(config.maxdate){
maxdate=new date(config.maxdate)
}
self.isleap = function (year) { return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
}
console.log(最小日期是:,mindate.format(yyyy-mm-dd))
console.log(最大日期是:,maxdate.format(yyyy-mm-dd))
console.log(当前日期：,currentdate())
pain(); function pain() { var n1str = new date(ynow, mnow, 1); //当月第一天
var firstday = n1str.getday(); //当月第一天星期几
var m_days = new array(31, 28 + self.isleap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的总天数
var tr_str = math.ceil((m_days[mnow] + firstday) / 7); //表格所需要行数
//打印表格第一行（有星期标志）
$(#datetb).remove(); var str = <table id='datetb' cellspacing='0'><tr><td>周日</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td></tr>; for (i = 0; i 11) {
mnow = 0;
ynow++;
} else {
mnow++;
} if(ynow==maxdate.getfullyear()&&mnow==maxdate.getmonth()){ var _mday=maxdate.getdate(); if(dnow>_mday) dnow=_mday;
}
pain();
}
self.seleted=function($td){ if (!$td.hasclass('selected')) { var day = $td.data(day); var selecteddate=new date(ynow, mnow, day, 1, 0, 0); if (selecteddate<mindate||selecteddate>maxdate) {
console.log(该日期不能预约); return;
}
$(.datebox table td).removeclass('selected').children('.subscribe').remove();
$td.addclass('selected');
$td.html('<p>' + $td.html() + '</p><p class="subscribe">预约</p>');
dnow=day;
setdate(ynow, mnow, day);
}
}
self.getdate=function(){ return currentdate();
}
$ele.on(click, table td, function () {
self.seleted($(this));
});
config.$prev.click(function () {
self.prev();
});
config.$next.click(function () {
self.next();
});
return self;
}
css：随便玩了。
body {
font-family: helvetica,microsoft jhenghei;
font-size:1.5rem;
}*{ padding:0; margin:0;}.content {
padding-top: 11%;
font-family: hyxmtj,microsoft jhenghei;
text-shadow: 0.5px 1px 1px #e3eab7;
}.datetitle {
width: 100%;
background: #fed700;
text-align: center;
line-height: 3rem;
-moz-border-radius: 1.7rem;
-webkit-border-radius: 1.7rem;
border-radius: 1.7rem;
border-bottom: 0.25rem solid #d1a802;
color: black;
text-shadow: 1px 1px 1px #d1a802;
position: relative;
}.datetitle:before {
content: ;
position: absolute;
width: 62%;
border-left: 0.5rem solid #d1a802;
border-right: 0.5rem solid #d1a802;
height: 1.5rem;
bottom: -1.5rem;
left: 0;
margin-left: 17%;
}.datebox{ border:1px solid #d1a802;margin: 0 auto; margin-top: 1.2rem; width:68%; -moz-border-radius:1.5rem; -webkit-border-radius:1.5rem; border-radius:1.5rem; padding:0 1rem; font-size:0.7rem; background:white; text-shadow:none;}.datebox table{width:100%; border:none;}.datebox table td{ width: 2rem;height: 2rem;text-align: center;border: 1px solid transparent;}.datebox table td p{ font-size: small; }.datebox table td.selected{border:1px solid #deaa5d; color:#deaa5d; }.datebox table td.selected .subscribe{display:block;}.datebox table td .subscribe{display:none;}.datebox table tfoot td{ font-weight: bold;}.databox #up ,.databox #down {
cursor: pointer;
}.datetitle #down {
float: right;
margin-right:2rem;
}.datetitle #up {
float: left;
margin-left:2rem;
}.datetitle #up:hover ,.datetitle #down:hover {
color: green;
}
view code
公布了isleap，next，prev，getdate，seleted 五个方法(看名字就不需要解释了吧)。默认今天是最小的预约时间。
可以这样设定最大的可预约时间：
var date = $(.datebox).datebox({maxdate:2016-12-20});
同理可以设置最小日期。
换月的时候日期会自动切换到可预约的日期。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
微信分享功能的开发
公众号支付接口的开发
webpack自动刷新与解析的使用
以上就是js里特别好用的轻量级日期插件的详细内容。