layDate(最喜欢的日期组件，没有之一)
之前做的一个项目，一个效果让我耿耿于怀。就是日期选择时，特定的日期或者某个范围内的日期是需要被禁用的。
可能之前技术太烂了，没有写出来，今天复习layer的时候看到这个日期组件和大家推荐一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>laydate</title>
<link rel="stylesheet" type="text/css" href="laydate/theme/default/laydate.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
可选的日期：2018-8-1----------2018-8-18;
这个范围以外的日期和2018-8-3全部禁用，不可选。
</div>
<input type="text" class="layui-input" id="test1">
<script type="text/javascript">
$(function(){
var Data=[];
var datatime="2018-8-3";//这是要被禁用的日期
laydate.render({
elem: "#test1" //指定元素
,value: "2018-08-18" //必须遵循format参数设定的格式
,ready: function(date){//初始控件打开时的回调
console.log("初始打开回调",date); //得到初始的日期时间对象
for(var k=0;k<$("td").length;k++){
var val=$("td").eq(k).attr("lay-ymd");
Data.push(val);
}
for(var g=0;g<Data.length;g++){
if(Data[g]==datatime){//单独禁用
$("td").eq(g).addClass("laydate-disabled");
}
}
}
,change: function(value, date, endDate){//日期切换时触发的回调
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
console.log("日期被切换了----------");
}
,done: function(value, date, endDate){//选择完之后触发的回调
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
console.log("选中之后----------");
}
// 禁用的日期范围
,min: "2018-8-1"
,max: "2018-8-18"
});
});
</script>
</body>
</html>
演示Demo:http://www.bright2017.top/test1/test1-10/声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： Element-UI的表格动态加载数据
- 下一篇： vue常见报错记录
