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" οnclick="javascript:switchDate(1);" style="background-color:#cccccc">日</span>  
						<span class="input-group-addon" id="switchMonth" οnclick="javascript:switchDate(2);" >月</span>  
						<span class="input-group-addon" id="switchYear" οnclick="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" οnchange="changeTime(1)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime"   readOnly id="timeMax1" οnchange="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" οnchange="changeTime(3)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime2"   readOnly id="timeMax2" οnchange="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" οnchange="changeTime(5)">  
						<span class="input-group-addon">至</span>  
						<input type="text" class="form-control form_datetime3"   readOnly id="timeMax3" οnchange="changeTime(6)">
					</div>
				</div>
				<div class="col-md-2">
					<button type="button" class="btn btn-success btn-sm" οnclick="addData();">添加</button>
				    <button type="button" class="btn btn-primary btn-sm" οnclick="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();
}

                
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值