Layui和xm-select日期时间下拉多选前后台实现思路

页面引入和效果

页面引入layui.css、layui.js和xm-select.js

页面实现效果：

layui.css、layui.js和xm-select.js 获取：
Layui 官网：https://www.layui.com/
Layui 扩展组件 xmSelect 地址：https://fly.layui.com/extend/xmSelect/
组件 xmSelect 使用手册：https://maplemei.gitee.io/xm-select/#/component/install

前后台实现

问题： 日期下拉框实现日期多选，可选择日期不能小于当前日期，能看到公历节日日期，实现以字符串提交到后台，修改时数据反显。

页面代码

图中的 id 值为 js 需要

xm-select日期时间下拉多选根据ID(courseDates)渲染

jQuery 代码：

<script>
  		var courseDates = xmSelect.render({
   
			el: '#courseDates', 
			content: '<div id="laydate" />',
			height: 'auto',
			autoRow: true,
			on: function(data){
   
				if(!data.isAdd){
   
					dateSelect(courseDates.getValue('value'));
				}
			}
		});
	  	
		layui.use('laydate', function(){
   
		  var laydate = layui.laydate;
		  //执行一个laydate实例
		  layui.laydate.render({
   
				elem: '#laydate',
				position: 'static',
				theme: 'molv',      // 墨绿主题
				showBottom: false,  // 不显示底部按钮
				calendar: true,     // 开启公历节日
				format: 'yyyy-MM-dd',
				min:minDate(),      // 设置最小可选的日期
				change: function(){
   
					dateSelect(courseDates.getValue('value'));
				},
				
				done: function(value){
   
					var values = courseDates.getValue('value');
					var index = values.findIndex(function(val){
   
						return val === value
					});
					
					if(index != -1){
   
						values.splice(index, 1);
					}else{
   
						values.push(value);
					}
					
					dateSelect(values);
					
					courseDates.update({
   
						data: values.map(function(val){
   
							return {
   
								name: val,
								value: val,
								selected: true,
							}
						})
					})
				},
				ready: removeAll,
			});
		  
		});
		
		
		function removeAll(){
   
			document.querySelectorAll('#laydate td[lay-ymd].layui-this').forEach(function(dom){
   
				dom.classList.remove('layui-this');
			});
		}
	
		function dateSelect(values){
   
			removeAll();
			values.forEach(function(val){
   
				var dom = document.querySelector('#laydate td[lay-ymd="'+val.replace(/-0([1-9])/g, '-$1')+'"]');
				dom && dom.classList.add('layui-this');
			});
		}
		
		// 设置最小可选的日期
		function minDate(){
   
		    var now = new Date();
		    return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
		}
		
		
  </script>

表单提交

表单提交根据 id = “valueStr” 处理：xm-select选择值获取、数据非空判断和重复数据校验。

进一步完善 jQuery 代码：（重复数据校验和表单提交后台逻辑根据个人系统而定）

&