jQuery时间范围选择插件

2016-11-19

jQuery时间范围选择插件pickerDateRange

一般输入框操作都用from包裹 $(“#form-query”).form(‘serialize’);将参数序列化
api https://www.cnblogs.com/chenguiya/p/5768858.html

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"  href="dateRange.css" type="text/css" />
    <link rel="stylesheet"  href=" monthPicker.css" type="text/css" />
    <script type="text/javascript" src="dateRange.js"></script>
    <script type="text/javascript" src="monthPicker.js"></script>
</head>
<body>

<span>查询时间：</span>
<input type="text" readonly  id="date1" />
<script>
   var  starttime = null,endtime=null;
   var dateRange1 = new pickerDateRange('date1', {
   	isTodayValid : true,
   	needCompare : false,
   	defaultText : ' 至 ',
   	autoSubmit : true,
   	theme : 'ta',
   	success : function(obj) {
   		starttime = obj.startDate,
   		endtime = obj.endDate
   	}
   });
</script>
</body>
</html>

默认一个星期

var D = new Date();
	var D2 = new Date(D);
	D2.setDate(D.getDate()-7);
	var yy = D.getFullYear();
	var mm = D.getMonth() + 1;
	var dd = D.getDate();
	var yy2 = D2.getFullYear();
	var mm2 = D2.getMonth() + 1;
	var dd2 = D2.getDate();
	endDay = yy+"-"+mm+"-"+dd;
	startDay = yy2+"-"+mm2+"-"+dd2;

	starttime = startDay;
	endtime = endDay;
	var dateRange1 = new pickerDateRange('date1', {
		isTodayValid : true,
		startDate : startDay,
		endDate : endDay,
		needCompare : false,
		defaultText : ' 至 ',
		autoSubmit : true,
		theme : 'ta',
		success : function(obj) {
			$("#form-query").form('load', {
				'starttime': obj.startDate,
				'endtime': obj.endDate
			});
		}
	});

### 只显示月份

<div id="div_month_picker">
    <span class="date_title" id="month_picker"></span>
</div>
//月份下拉框
monthPicker.create('month_picker', {
	trigger : 'month_trigger',
	autoCommit : true,
	callback : function(obj){
	 	month = obj
	}
});