日期时间下拉框实现的一种方式

参考写的时间是类似于2018-11-03 18:40:54的一个字段，前台需要分离开属于哪年哪个季度哪月的下拉选择。
部分主要代码如下，前台是jsp

<th>
	<i title="筛选" onclick="query_by_year('year','年份','no')"></i>
	<span>年份</span>
</th>
<th>
	<i title="筛选" onclick="query_by_quarter('quarter','季度','no')"></i>
	<span>季度</span>
</th>
<th>
	<i title="筛选" onclick="query_by_month('month','月份','no')"></i>
	<span>月份</span>
</th>

<script>
	/*筛选年份*/
	function query_by_year(dataType, dataTitle ,haveNullButton){
		var year = $("#searchform input[id='" + dataType +"']").val()
		$.ajax({
			type: "POST",
			url: '${base}/***/getYears',
			success:function(data){
				layer.open({
					title: '筛选数据【' + dataTitle + '】',
					type: 1, 
					scrollbar:false,
					content: "<div id='pop_query_content'></div>",
					area: ['500px', '230px']
				});
				
				var json_data = {
					'year': year, 
					'datatype': dataType,
					'yearJson': data,
					'haveNullButton':haveNullButton
				}
				$("#pop_query_by_year").tmpl(json_data).appendTo('#pop_query_content');
			}
		});
	}
	
	/*筛选季度*/
	function query_by_quarter(dataType, dataTitle ,haveNullButton){
		var quarter = $("#searchform input[id='" + dataType +"']").val()
		layer.open({
			title: '筛选数据【' + dataTitle + '】',
			type: 1, 
			scrollbar:false,
			content: "<div id='pop_query_content'></div>",
			area: ['500px', '230px']
		});
		var json_data = {
			'quarter': quarter, 
			'datatype': dataType,
			'haveNullButton':haveNullButton
		}
		$("#pop_query_by_quarter").tmpl(json_data).appendTo('#pop_query_content');
	}
	
	/*筛选月份*/
	function query_by_month(dataType, dataTitle ,haveNullButton){
		var month = $("#searchform input[id='" + dataType +"']").val()
		layer.open({
			title: '筛选数据【' + dataTitle + '】',
			type: 1, 
			scrollbar:false,
			content: "<div id='pop_query_content'></div>",
			area: ['500px', '230px']
		});
		var monthArr = ['01','02','03','04','05','06','07','08','09','10','11','12'];
		var json_data = {
			'month': month, 
			'monthArr': monthArr, 
			'datatype': dataType,
			'haveNullButton':haveNullButton
		}
		$("#pop_query_by_month").tmpl(json_data).appendTo('#pop_query_content');
	}
</script>

<%-- 筛选年份	--%>
<script id="pop_query_by_year" type="text/x-jquery-tmpl">
	<div class="edit-box">
		<p>
			<label for="entityvalue">年份:</label>
			<select name="entityvalue" id="entityvalue">
				{{each(m,y) yearJson}}
					<option value="{{= y}}" {{if y == year}}selected="selected"{{/if}}>{{= y}}</option>
				{{/each}}
			</select>
		</p>
		<p>
			{{if haveNullButton=='yes'}}
				<input type="button" onclick="query_bydatatype_blank('${"${datatype}"}')" value="显空" class="btn btn-info sub-btn"/>
			{{/if}}
			<input type="button" onclick="query_bydatatype('${"${datatype}"}')" value="筛选" class="btn btn-info sub-btn"/>
		</p>
	</div>
</script>

<%-- 筛选季度	--%>
<script id="pop_query_by_quarter" type="text/x-jquery-tmpl">
	<div class="edit-box">
		<p>
			<label for="entityvalue">季度:</label>
			<select name="entityvalue" id="entityvalue">
				<option value="1" {{if quarter == 1}}selected="selected"{{/if}}>第一季度</option>
				<option value="2" {{if quarter == 2}}selected="selected"{{/if}}>第二季度</option>
				<option value="3" {{if quarter == 3}}selected="selected"{{/if}}>第三季度</option>
				<option value="4" {{if quarter == 4}}selected="selected"{{/if}}>第四季度</option>
			</select>
		</p>
		<p>
			{{if haveNullButton=='yes'}}
				<input type="button" onclick="query_bydatatype_blank('${"${datatype}"}')" value="显空" class="btn btn-info sub-btn"/>
			{{/if}}
			<input type="button" onclick="query_bydatatype('${"${datatype}"}')" value="筛选" class="btn btn-info sub-btn"/>
		</p>
	</div>
</script>

<%-- 筛选月份	--%>
<script id="pop_query_by_month" type="text/x-jquery-tmpl">
	<div class="edit-box">
		<p>
			<label for="entityvalue">月份:</label>
			<select name="entityvalue" id="entityvalue">
				{{each(m,n) monthArr}}
					<option value="{{= n}}" {{if month == n}}selected="selected"{{/if}}>{{= n}}</option>
				{{/each}}
			</select>
		</p>
		<p>
			{{if haveNullButton=='yes'}}
				<input type="button" onclick="query_bydatatype_blank('${"${datatype}"}')" value="显空" class="btn btn-info sub-btn"/>
			{{/if}}
			<input type="button" onclick="query_bydatatype('${"${datatype}"}')" value="筛选" class="btn btn-info sub-btn"/>
		</p>
	</div>
</script>

@Controller

/**
 * 获取当前数据所有的年份
*/
	@RequestMapping("/getYears")
	@ResponseBody
	public List<String> getYears(){
		return service.getYears();
	}

service和和dao直接和controller类似，主要写一下mapper。

    //查询列表要用到的查询
	select from tableName
	<where>
	<if test="year != null">
		and<![CDATA[ YEAR(date_time) = #{year}]]>
	</if>
	<if test="quarter != null">
		and<![CDATA[ QUARTER(date_time) = #{quarter}]]>
	</if>
	<if test="month != null">
		and<![CDATA[ MONTH(date_time) = #{month}]]>
	</if>
	//从数据库查出来的有的年份
	<select id="getYears" resultType="string">
		SELECT
			DISTINCT DATE_FORMAT(date_time, '%Y') YEAR
		FROM
			tableName
		WHERE
			date_time IS NOT NULL
	</select>

前台分开展示直接在javabean里分离的，无具体对应的字段，上面的筛选需要在javabean里加上。

    public String getErYear(){
    	String year = "";
    	Date date = new Date();
    	SimpleDateFormat sfYear = new SimpleDateFormat("yyyy");
    	if (this.datatime!= null) {
    		date = this.datatime;
		}
    	year = sfYear.format(date)+"";
    	return year;
    }
    
    public String getErMonth(){
    	String month = "";
    	Date date = new Date();
    	SimpleDateFormat sfMonth = new SimpleDateFormat("MM");
    	if (this.datatime!= null) {
    		date = this.datatime;
		}
    	month = sfMonth.format(date)+"";
    	return month;
    }
    
    public String getErQuarter(){
    	String quarter = "";
    	Date date = new Date();
    	if (this.datatime!= null) {
    		date = this.datatime;
		}
    	int month = date.getMonth() + 1;
    	if (month >= 1 && month <= 3) {
    		quarter = "一";
    	}else if (month >= 4 && month <= 6) {
    		quarter = "二";
		}else if (month >= 7 && month <= 9) {
			quarter = "三";
		}else if (month >= 10 && month <= 12) {
			quarter = "四";
		}
    	return quarter;
    }

做筛选的时候javabean里需要加具体的year，month，quarter 字段。