layui Date 常用属性简述及日常试错_laydate属性-优快云博客

本文介绍如何使用layui框架中的Date插件进行日期选择器的配置，包括基本属性设置、解决控件闪动问题的方法及自定义弹出控件事件等高级特性。通过实例演示了解决页面id冲突及窗口长宽受限导致的问题。

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

一般而言用到Date常用属性有

laydate.render( {
	elem : '#nf'      					    //绑定元素 
	 ,type : 'year'   //控件选择类型   year	month	date	time	datetime
	 ,range:true    						//开启左右面板范围选择  false
	 ,show: false						    //通常用于外部事件调用控件
	 ,position： 'absolute'			 	   	//     fixed   abolute   
	 ,trigger: 'click'  															//自定义弹出控件的事件
	 ,min/max  :min: '1900-1-1'、max: '2099-12-31'           //最小/大范围内的日期时间值
	 ,isInitValue   :true             		//初始值填充
	 ,value  :new Date()                    //初始值
	 ,format  :yyyy-MM-dd     //自定义格式   yyyy  y	MM M	dd d	HH	H	mm	m	ss	s
});

其中date控件最平常的就是（一闪而过的问题）其他详细设置都可以在官网找

由于页面的id冲突导致控件失效
- 重新更换id即可
由于窗口的长宽受限导致控件闪动
- trigger 属性可以用于解决时间选择窗口一闪而过的的问题
```
aydate.render( {
elem : '#nf',
range:true
,trigger: 'click'
});
```
- 在加载控件页设置合适的长宽
- 控件可以指定位置从而解决
  - 思路：利用layui在前台创建一个容器存放date控件；在后台控制容器的显示隐藏；这样date控件可以放置于任意调校的位置（）
```
jq:$("#nf").focus(
		 function(){
		  $("#w_div").show();
 });
	 laydate.render({
  	  elem: '#n_div',
  	  position: 'static',
  	  done: function (value) {
  	 		 $("#w_div").hide();
  	  });
```

  	html:<div class="layui-inline" id="w_div" style="display:none;">
  				<div id="n_div" style="position:absolute;z-index:99999;right: -420px;top: 120px;"></div>
  		</div>`