mui 时间控件动态设置开始时间和结束时间（jsp）

jsp 页面标签

<link rel="stylesheet" href="${pageContext.request.contextPath}/hyres/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/hyres/css/mui.picker.min.css" />

<script src="${pageContext.request.contextPath}/hyres/js/mui.min.js"></script>
<script src="${pageContext.request.contextPath}/hyres/js/mui.picker.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/weui/lib/jquery-2.1.4.js"></script>


<div id = "months"  style="display: none">
	<div class="mui-input-row date">
		<button onclick="dtpickerM($(this));" class="btn start_btn"></button>
		<input id='result_start_m' class="start" value="" readonly="readonly" placeholder="开始月份"/>
	</div>
	<div class="mui-input-row date">
		<button onclick="dtpickerM($(this));"  class="btn start_btn"></button>
		<input id='result_end_m' class="start" value=""  readonly="readonly" placeholder="结束月份"/>
	</div>
</div>
<div id ="dates">
	<div class="mui-input-row date">
		<button  onclick="dtpickerD($(this));" class="btn start_btn"></button>
		<input id='result_start_d' class="start" value=""  readonly="readonly" placeholder="开始日期"/>
	</div>
	<div class="mui-input-row date">
		<button onclick="dtpickerD($(this));" class="btn start_btn"></button>
		<input id='result_end_d' class="start" value=""  readonly="readonly" placeholder="结束日期"/>
	</div>
</div>

js 代码

function dtpickerD (element){
	var dtpicker = null;
	var id = element.next().attr('id')
		if(id.indexOf('start')>0){ //选择的开始时间
			$("#result_start_d").val("");
			$("#result_end_d").val("");
		}
	var start_d =  $("#result_start_d").val(); //开始日期
	var end_d =  $("#result_end_d").val();//结束日期
	if(id.indexOf('end')>0 && start_d =="" ){
		layer.msg("请先选择开始日期");
		return;
	}
	if(start_d != ""){
		//var new_start_d =  start_d.replace("-",",");
		var start_date = new Date(start_d); //将开始日期转换成Date类型
		var end_date = new Date(start_date);
		//判断具体加几天
		var now = new Date();
		var day; //加的月数
		var intervalDay = Math.floor((now.getTime() - start_date.getTime())/(24*3600*1000));
		if(intervalDay > 6){
			day = 6;
		}else{
			day = intervalDay;
		}
		
		end_date.setDate(start_date.getDate()+day);  
		//var end_NYR = end_date.getFullYear()+"-"+(end_date.getMonth()+1+"-"+end_date.getDate());
		 dtpicker = new mui.DtPicker({
			    type: "date",//设置日历初始视图模式 
			    beginDate:start_date,//设置开始日期 
			    endDate: end_date,//设置结束日期 
			})
		
	 }else{
		 dtpicker = new mui.DtPicker({
		    type: "date",//设置日历初始视图模式 
		    //beginDate: new Date(2015, 04),//设置开始日期 
		    endDate: new Date(),//设置结束日期 
		})
	 }
	 	dtpicker.show(function(e) {
		 element.next().val(e.value);
	})
	 
 }
 
 function dtpickerM (element){
	var dtpicker = null;
	
	var id = element.next().attr('id')
		if(id.indexOf('start')>0){ //选择的开始时间
			$("#result_start_m").val("");
			$("#result_end_m").val("");
		}
	var start_m =  $("#result_start_m").val(); //开始月份
	var end_m =  $("#result_end_m").val();//结束月份
	if(id.indexOf('end')>0 && start_m =="" ){
		layer.msg("请先选择开始月份");
		return;
	}
	if(start_m != ""){
		var start_date = new Date(start_m); //将开始月份转换成Date类型
		var end_date = new Date(start_date);
		//判断具体加几个月份
		var now = new Date();
		var day; //加的月数
		var intervalMonth = (now.getFullYear()*12+now.getMonth()) - (start_date.getFullYear()*12+start_date.getMonth());
		if(intervalMonth > 5){
			day = 5;
		}else{
			day = intervalMonth;
		}
		
		end_date.setMonth(start_date.getMonth()+day);  
		//var end_NY = end_date.getFullYear()+"-"+(end_date.getMonth()+1);
		 dtpicker = new mui.DtPicker({
			    type: "month",//设置日历初始视图模式 
			    beginDate: start_date,//设置开始日期 
			    endDate: end_date,//设置结束日期 
			})
		
	 }else{
		 dtpicker = new mui.DtPicker({
		    type: "month",//设置日历初始视图模式 
		    //beginDate: new Date(2015, 04),//设置开始日期 
		    endDate: new Date(),//设置结束日期 
		})
	 }
	 	dtpicker.show(function(e) {
		 element.next().val(e.value);
	})
 }

实现的功能是开始到结束月份的跨度<=6 个月，开始到结束日期的跨度是<=7天，比如选择了开始月份为 2019-02，那么选择结束月份的时候，时间控件只会提供2019-02 — 2019-07 这6个月份以供选择。