layDate(最喜欢的日期组件，没有之一)

超、凢脫俗 2022-06-02 12:12 189阅读 0赞

之前做的一个项目，一个效果让我耿耿于怀。就是日期选择时，特定的日期或者某个范围内的日期是需要被禁用的。

可能之前技术太烂了，没有写出来，今天复习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/][http_www.bright2017.top_test1_test1-10]

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[http_www.bright2017.top_test1_test1-10]: http://www.bright2017.top/test1/test1-10/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220602/26c357cfed5f47beb86eae465da97942.png