layui框架学习（18：日期与时间选择模块-中）

学习并记录layui框架中内置模块的日期与时间选择模块的函数、参数设置方式。

gc_2299

5273人浏览 · 2023-03-26 17:48:43

gc_2299 · 2023-03-26 17:48:43 发布

日期与时间选择模块支持日期与时间的范围选择，所谓范围选择是指同时选择开始和结束日期或时间，并在输入元素中显示。laydate模块支持两种方式的范围选择：1）在单个输入元素上进行范围选择，并用分隔符分隔开始日期或时间、结束日期或时间；2）使用两个输入元素进行范围选择，并在两个元素内分别显示开始日期或时间、结束日期或时间。
第一种范围选择方式，直接在render函数中增加基础参数range，并设置值为true，此时默认分隔符为‘-’，如果要设置其它分隔符，只需将range的值设置为所需的分隔符字符串即可。效果及示意代码如下所示：
在这里插入图片描述

	//分隔符默认为-
	laydate.render({
		elem: '#rsplan' ,//指定元素
		type:'date',
		range:true
	  });

	//
	laydate.render({
		elem: '#rsplan' ,//指定元素
		type:'date',
		range:‘到’
	  });

第二种范围选择方式，由于涉及两个输入元素，在elem中无法同时指定两个元素，因此需要将两个输入元素置于一父容器之内，并在elem参数中设置该父容器的选择器或DOM对象，然后在range参数中以数组的形式指定两个输入元素的选择器或DOM对象。效果及示意代码如下所示（示例代码参考自参考文献2）：
在这里插入图片描述

	<div class="layui-inline" id="test-range">
        <div class="layui-input-inline">
          <input type="text" id="startDate" class="layui-input" placeholder="开始时间">
        </div>
        <div class="layui-form-mid">到</div>
        <div class="layui-input-inline">
          <input type="text" id="endDate" class="layui-input" placeholder="结束时间">
        </div>
      </div>
      <script>
			  layui.use(['laydate','form'], function(){
				  var form = layui.form;
				  var laydate = layui.laydate;			  
				 				  
				  laydate.render({
						elem: '#test-range' ,//指定元素
						type:'datetime',
						range:['#startDate','#endDate']
				  });
			  });	
		</script>

render函数中支持采用基础参数weekStart 设置起始周，也即日期选择窗口中默认第一列为周几，默认为周日，对应的值为0，如果需要设置为其它值，则周一到周六对应的数值为1到6。效果及示意代码如下所示：
在这里插入图片描述

	laydate.render({
			elem: '#rsplan' ,//指定元素
			type:'date',
			range:'到',
			weekStart: 6
	  });

基础参数isPreview控制是否开启值预览效果，默认为开启，所谓值预览是指在弹出的日期与时间选择窗口的左下角显示选择的日期或时间。关闭值预览的效果及代码如下所示：
在这里插入图片描述

	laydate.render({
			elem: '#rsplan' ,//指定元素
			type:'date',
			range:'到',
			weekStart: 6,
			isPreview:false
	  });

基础参数position支持设置日期与时间选择窗口的定位方式，取值包括absolute、fixed和static，其中前两种取值都是采用弹出窗口方式选择日期或时间，而static则是以内嵌方式直接选择日期或时间。采用static方式，也即内嵌方式选择时间或日期时，不能直接指定输入元素，而应指定嵌入时间或日期选择窗口的容器的选择器或DOM对象，否则无法实现内嵌效果。内嵌效果及代码如下所示：
在这里插入图片描述

	laydate.render({
				elem: '#workdate' ,//指定元素
				position: 'static'
				  }

layui官网教程中还介绍了一种内嵌日期的用法，即设置值切换事件change的响应函数，当在内嵌日期或时间中选择值时，实时将选择值显示在另一个元素中。效果及代码如下所示：
在这里插入图片描述

	<div>
	  <label>参加工作日期:</label><span id="testView"></span><br />
	  <div id="workdate"></div>		  
	</div>	
	<script>
			  layui.use(['laydate','form'], function(){
				  var form = layui.form;
				  var laydate = layui.laydate;
				  
				  laydate.render({
						elem: '#workdate' ,
						position: 'static',
						change: function(value, date){ 
						    lay('#testView').html(value);
						  }
				  });
			  });	
		</script>

基础参数showBottom设置是否显示底部栏，默认为true，显示底部栏。效果及代码如下所示：
在这里插入图片描述

基础参数btns设置底部栏中显示的按钮及顺序，layui中内置的按钮包括clear（重置）、now（现在）、confirm（确认），可以通过数组方式设置要显示的按钮及顺序，默认为[‘clear’, ‘now’, ‘confirm’]。如果设置底部栏中的按钮及顺序为确认、重置，则效果及代码如下所示：
在这里插入图片描述

基础参数lang设置日期与时间选择窗口中的显示语言，主要值包括cn（中文版）、en（英文版），默认为中文版。效果及代码如下所示：
在这里插入图片描述

	laydate.render({
			elem: '#workdate' ,//指定元素
			position: 'static',
			showBottom: true,
			lang: 'en',
			btns: ['confirm','clear'],
			change: function(value, date){ //日期被切换的回调
			    lay('#testView').html(value);
			  }
	  });

基础参数theme设置日期与时间选择窗口的样式，包括配色及线框等，主要值包括default（简约）、molv（墨绿）、#颜色值（自定义颜色背景）、grid（格子主题），其中#颜色值只是可以根据需要自行设置背景色值，如果传入其它字符，如：theme: ‘xxx’，则控件将会多出一个 class=“laydate-theme-xxx” 的CSS类，以便于单独定制主题。效果及代码如下所示：
在这里插入图片描述

	laydate.render({
			elem: '#workdate' ,//指定元素
			position: 'static',
			showBottom: true,
			lang: 'en',
			btns: ['confirm','clear'],
			theme: 'grid',
			change: function(value, date){ //日期被切换的回调
			    lay('#testView').html(value);
			  }
	  });