layer 日期laydate年月日切换渲染

首先引入所需资源

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<script src="./jquery-2.2.2.js"></script>

 1、HTML

<div>
		                    	<span class="comSpanTit tabTime">
		                    		<font class="cur" name="year">年</font>
		                    		<font name="month">月</font>
		                    		<font name="day">日</font>
		                    	</span>
	                    		<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy" />
	                    		<span class="csb_span timeSeparate">&nbsp;-&nbsp;</span>
	                    		<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy" />
	                    	</div>

 2、JS

layui.use('laydate', function(){
	  	var laydate = layui.laydate;
		/*
		 * 年月日时间日期选择
		 */
		laydate.render({
		    elem: '#tabStart',
		    type: 'year',
    		theme: '#3f8efc'
		});
	  	laydate.render({
		    elem: '#tabEnd',
		    type: 'year',
    		theme: '#3f8efc'
		});
		$(".tabTime font").each(function(){
			var timeName = $(this).attr("name");
			$(this).on("click" , function(){
				$(this).addClass("cur").siblings().removeClass("cur");
				if(timeName == "year"){
					console.log(timeName)
					$(".timeSeparate").prev().remove();
					$(".timeSeparate").next().remove();
					$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy" />');
					$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy" />');
					laydate.render({
					    elem: '#tabStart',
					    type: 'year',
			    		theme: '#3f8efc'
					});
				  	laydate.render({
					    elem: '#tabEnd',
					    type: 'year',
			    		theme: '#3f8efc'
					});
				}
				if(timeName == "month"){
					console.log(timeName)
					$(".timeSeparate").prev().remove();
					$(".timeSeparate").next().remove();
					$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy-MM" />');
					$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy-MM" />');
					laydate.render({
					    elem: '#tabStart',
					    type: 'month',
			    		theme: '#3f8efc'
					});
				  	laydate.render({
					    elem: '#tabEnd',
					    type: 'month',
			    		theme: '#3f8efc'
					});
				}
				if(timeName == "day"){
					console.log(timeName+"1111111111")
					$(".timeSeparate").prev().remove();
					$(".timeSeparate").next().remove();
					$(".timeSeparate").before('<input class="csb_text y_td_w88 m_r_0" id="tabStart" type="text" placeholder="yyyy-MM-dd" />');
					$(".timeSeparate").after('<input class="csb_text y_td_w88 m_r_0" id="tabEnd" type="text" placeholder="yyyy-MM-dd" />');
					laydate.render({
					    elem: '#tabStart',
			    		theme: '#3f8efc'
					});
				  	laydate.render({
					    elem: '#tabEnd',
			    		theme: '#3f8efc'
					});
				}
			})
		});
		
	});