Bootstrap報表切換年月日datetimepicker

<form id="searchForm">
	         <div class="row" >
	         	<div class="col-md-3">
	         		<div class="input-group input-inline-sm col-sm-12" >  
	         			<input type="hidden" name="timeType" id="timeType" value="1">
						<span class="input-group-addon" id="switchDay" onclick="javascript:switchDate(1);" style="background-color:#cccccc">日</span>  
						<span class="input-group-addon" id="switchMonth" onclick="javascript:switchDate(2);" >月</span>  
						<span class="input-group-addon" id="switchYear" onclick="javascript:switchDate(3);" >年</span>  
						<input type="hidden" name="startDateStr" id="timeMin">
						<input type="hidden" name="endDateStr" id="timeMax">
					</div>
	        	 </div>
				<div class="col-md-5" id="div1">  
					<div class="input-group input-inline-sm col-sm-12" >  
						<span class="input-group-addon " >時間</span>  
						<input type="text" class="form-control form_datetime"  readOnly id="timeMin1" onchange="changeTime(1)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime"   readOnly id="timeMax1" onchange="changeTime(2)">
					</div>
				</div>
				
				<div class="col-md-5" id="div2">  
					<div class="input-group input-inline-sm col-sm-12" >  
						<span class="input-group-addon " >時間</span>  
						<input type="text" class="form-control form_datetime2"  readOnly id="timeMin2" onchange="changeTime(3)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime2"   readOnly id="timeMax2" onchange="changeTime(4)">
					</div>
				</div>
				
				<div class="col-md-5" id="div3">  
					<div class="input-group input-inline-sm col-sm-12" >  
						<span class="input-group-addon " >時間</span>  
						<input type="text" class="form-control form_datetime3"  readOnly id="timeMin3" onchange="changeTime(5)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime3"   readOnly id="timeMax3" onchange="changeTime(6)">
					</div>
				</div>
				<div class="col-md-2">
					<button type="button" class="btn btn-success btn-sm" onclick="addData();">添加</button>
				    <button type="button" class="btn btn-primary btn-sm" onclick="search();">搜索</button>
				</div>
			</div>
		    </form>

$(function(){
	$("#div1").show();
	$("#div2").hide();
	$("#div3").hide();
	$(".form_datetime").datetimepicker({
		language:  'zh-CN', 
		format: 'yyyy-mm-dd',//顯示格式
		todayHighlight: 1,//今天高亮
		minView: "month",//設置只顯示到月份
		startView:2,
		forceParse: 0,
		showMeridian: 1,
		autoclose: 1//選擇後自動關閉
		});
	$(".form_datetime2").datetimepicker({
		language:  'zh-CN', 
		format: 'yyyy-mm',//顯示格式
		todayHighlight: 1,//今天高亮
		minView: 3,//設置只顯示到月份
		startView:4,
		forceParse: 0,
		showMeridian: 1,
		autoclose: 1//選擇後自動關閉
		});
	$(".form_datetime3").datetimepicker({
		language:  'zh-CN', 
		format: 'yyyy',//顯示格式
		todayHighlight: 1,//今天高亮
		minView: 4,//設置只顯示到月份
		startView:4,
		forceParse: 0,
		showMeridian: 1,
		autoclose: 1//選擇後自動關閉
		});
	
});

function changeTime(num){
	switch(num){
	case 1:$("#timeMin").val($("#timeMin1").val());break;
	case 2:$("#timeMax").val($("#timeMax1").val());break;
	case 3:$("#timeMin").val($("#timeMin2").val());break;
	case 4:$("#timeMax").val($("#timeMax2").val());break;
	case 5:$("#timeMin").val($("#timeMin3").val());break;
	case 6:$("#timeMax").val($("#timeMax3").val());break;
	}
}

function clearDate()
{
	$("#timeMin").val('');
	$("#timeMax").val('');
	$("#timeMin1").val('');
	$("#timeMax1").val('');
	$("#timeMin2").val('');
	$("#timeMax2").val('');
	$("#timeMin3").val('');
	$("#timeMax3").val('');
}

function switchDate(num){
	var switchDay= $("#switchDay");
	var switchMonth= $("#switchMonth");
	var switchYear= $("#switchYear");
	clearDate();
	$("#timeType").val(num);
	switch(num){
	case 1:
		switchDay.css("background-color","#cccccc");
		switchMonth.css("background-color","#ffffff");
		switchYear.css("background-color","#ffffff");
		$("#div1").show();
		$("#div2").hide();
		$("#div3").hide();
		break;
	case 2:
		switchDay.css("background-color","#ffffff");
		switchMonth.css("background-color","#cccccc");
		switchYear.css("background-color","#ffffff");
		$("#div1").hide();
		$("#div2").show();
		$("#div3").hide();
		break;
	case 3:
		switchDay.css("background-color","#ffffff");
		switchMonth.css("background-color","#ffffff");
		switchYear.css("background-color","#cccccc");
		$("#div1").hide();
		$("#div2").hide();
		$("#div3").show();
		break;
	}
	search();
}