layui.js-laydate

最新推荐文章于 2025-04-10 11:35:13 发布

power_to_go_l7

最新推荐文章于 2025-04-10 11:35:13 发布

阅读量826

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/80088471

版权

前端学习专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了layui日期选择器插件的使用方法及各种配置选项，包括如何初始化日期选择器、设置日期格式、限定日期范围等，并展示了如何通过事件监听实现自定义功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <link  rel="stylesheet" media="all" href="../LAYUI/css/layui.css">
	</head>
	<body>
		<div class="layui-inline">	<!-- 注意：这一层元素并不是必须的 -->
			<input type="text" class="layui-input" id="test1" />
		</div>
		
		<span id="testView"></span>
		<div id="test2"></div>
	</body>
</html>
<script src="../LAYUI/layui.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<script type="text/javascript">
	layui.use('laydate',function(){
		var laydate = layui.laydate;
		
		//执行一个laydate实例
		laydate.render({
			elem:'#test1' //指定元素
		});
		
		//年选择器
		laydate.render({
			elem:'#test',
			type:'year'		//month/date/time/datetime
		});
		
		//范围
		laydate.render({
			elem:'#test',
			type:'year',		//month/  /time/datetime
			range:true		//或 range: '~' 来自定义分割字符
		});
		
		//格式
		laydate.render({
			elem:'#test',
			format:'yyyy年MM月dd日'	//可任意组合
		});
		
		//传入符合format格式的字符给初始值
		laydate.render({
			elem:'#test',
			value:'2018-08-18'		//必须遵守format参数设定的格式
		});
		
		//传入Date对象给初始值
		laydate.render({
			elem:'test',
			value:new Date(1534766888000)		参数即为：2018-08-20 20:08:08 的时间戳
		});
		
		//范围
		//限定在：2017年
		laydate.render({
			elem:'#test',
			min:'2017-1-1',
			max:'2017-12-31'
		});
		//限定在：过去一周到未来一周
		laydate.render({
			elem:'#test',
			min:-7,
			max:7
		});
		/*
		 * min: '2017-8-11 12:30:00'
  		 *	,max: '2017-8-18 12:30:00'
  		 * 
  		 * min: '09:30:00'
  		 *,max: '17:30:00'
		 */
		
		//trigger自定义弹出控件的事件
		laydate.render({
			elem:'#test',
			trigger:'click'	//采用click弹出控件
		});
		
		//show 默认显示
		laydate.render({
			elem:'#test',
			show:true	//直接显示
		});
		
		//外部事件调用
		lay('#test').on('click',function(e){	//假设test1是一个按钮
			laydate.render({
				elem:'#test',
				show:true,	//直接显示
				closeStop:'#test1'	//这里的意思是:点击test1所在元素阻止关闭事件冒泡，如果不设定则无法弹出控件
			});
		});
		
		//嵌套在指定容器中
		laydate.render({
			elem:'#test2',
			position:'static',
			change:function(value,date){	//监听日期被切换
				lay("#testView").html(value);
			}
		});
		
		//zIndex层叠顺序
		laydate.render({
			elem:'#test',
			zIndex:99999999
		});
		
		//showBottom是否显示底部栏
		//不显示
		laydate.render({
			elem:'#test',
			showBottom:false
		});
		
		//btns工具按钮
		laydate.render({
			elem:'#test',
			btns:['clear','confirm']
		});
		
		//lang语言
		//国际版
		laydate.render({
			elem:'#test',
			lang:'en'
		});
		
		//theme主题
		//墨绿背景主题
		laydate.render({
			elem:'test',
			theme:'molv'
		});
		//自定义背景主题	theme:'#393D49'    格子主题theme:'grid'
		//另外还可传入其他字符
		
		//calendar 是否显示公历节日
		//允许显示
		laydate.render({
			elem:'#test',
			calendar:true
		});
		
		//mark标注重要日子
//		var inal = laydate.render({
//			elem:'#test',
//			mark:{
//				'0-10-14':'123',
//				'0-12-31': '跨年' //每年12月31日
//				'2017-8-15': '' //具体日期
//				'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
//			},
//			done:function(value,date){
//				if(date.year === 2017 && date.month === 8 && date.date === 15){
//					//点击2017年8月15日，弹出提示语
//					
//				}
//			}
//		});

		//控件初始打开的回调
		laydate.render({
			elem:'#test',
			ready:function(date){
				//得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				console.log(date);
			}
		});
		
		//日期时间被切换后的回调
		laydate.render({
			elem:'#test',
			change:function(value,date,endDate){
				//得到日期生成的值，如：2017-08-18
				console.log(value);
				//得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				console.log(date);
				//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				console.log(endDate);
			}
		});
		
		//控件选择完毕后的回调
		laydate.render({
			elem:'#test',
			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}
				
			}
		});
		
		//弹出控件提示
		var ins1 = laydate.render({
			elem:'test',
			change:function(value,date,endDate){
				ins1.hint(value);	//在控件上弹出value值
			}
		});
		
		//配置基础路径
		laydate.path='/static/xxx';//laydate.js所在目录
		
		//配置好后 ，在调用
		laydate.render(options);
	});
</script>