后台使用的mel的模版
学期为空不限制时间；如果选中了2020年的学期，那么日历头部就是2020年1月
页面在js控制，我的步骤
//初始化时候找到要用的组件 lay(moduleId + ' .nyr ').each(function(){ let _this = this, str = _this.className, index = str .lastIndexOf("\ "); str = str .substring(index + 1, str .length); console.log(this) if(str == "startTime"){ $(moduleId + ' .'+str).attr('id', "startTime"); }else { $(moduleId + ' .'+str).attr('id', "endTime"); } });使用的页面id配合控件的class来生成的，这样做的目的是更好的在后续修改最大最小值；
//初始化时间控件 var start_opt = { elem : '#startTime', type : 'date', isInitValue: false, value:"2020-01-01", format : 'yyyy-MM-dd', show : true, done:function(value){ const start = new Date(new Date(new Date(value).toLocaleDateString()).getTime()); $("#form-safety-inspect-${timestamp} #startTime").attr("data-value",start.getTime()) } }; var end_opt = { elem : '#endTime', type : 'date', format : 'yyyy-MM-dd', show : true, done:function(value){ const end = new Date(new Date(new Date(value).toLocaleDateString()).getTime()+24*60*60*1000-1); $("#form-safety-inspect-${timestamp} #endTime").attr("data-value",end.getTime()) } };然后根据需求来设置最大最小限制以及默认值
if (minTime > startTime){ startTime = minTime } //minTime是我选中的学期的时间，startTime是最小时间的声明 endTime = data.endTime; $(moduleId + ' #startTime').focus(function() { if ($('#endTime').val() != '') { start_opt.min = startTime; start_opt.max = $('#endTime').val(); //设置最大时间 start_opt.value=new Date(startTime);//设置默认年月，比如现在是2019年，我选中的选项要求时间是从2020年开始，name开始时间的日历从2020年1月开始 } else { delete start_opt.max; start_opt.min = startTime; start_opt.value=new Date(startTime); start_opt.max = endTime; } laydate.render(start_opt); }); $(moduleId + ' #endTime').click(function() { if ($('#startTime').val() != '') { end_opt.min = $('#startTime').val(); end_opt.value=new Date($('#startTime').val()); end_opt.max = endTime; } else { delete end_opt.max; end_opt.min = startTime; end_opt.value=new Date(startTime); end_opt.max = endTime; } laydate.render(end_opt); });
