WdatePicker 实现年、季度、月、周、日、日期类型共用一个日期控件

最新推荐文章于 2024-04-18 23:25:37 发布

破局者One

最新推荐文章于 2024-04-18 23:25:37 发布

阅读量569

点赞数

分类专栏：笔记文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_43942359/article/details/117465241

版权

本文介绍了如何使用WdatePicker组件实现年、季度、月、周、日及日期类型的统一日期控件。通过HTML和JS代码示例展示其应用，并提供了后端封装的查询条件以及针对不同统计模式的Mysql数据库查询SQL，旨在提供完整的日期选择解决方案。

摘要由CSDN通过智能技术生成

HTML代码

	<input type="hidden" id="modelValue" value="${model}"> <!-- 回显选择模式 -->
	<input type="hidden" id="timeValue" value="${time}">  <!-- 回显时间 -->
     <div style="height: 57.8px">
		<p class="p2 p-item" style="margin-top: 16px">
			<label class="lab-item">统计模式 :</label>
			<select id="model" name="model" style="width: 120px;height: 22px" onchange="setDateTimeDom()">
				<option value="year">按年</option>
				<option value="month">按月</option>
				<option value="week">按周</option>
				<option value="day">按日</option>
			</select>
		</p>
		<p id="dateTimeDiv" style="margin-top: 16px;width: 300px" class="p2 p-item">
			<label class="lab-item"><font class="red">*</font>时间 :</label>
			<input type="text" id="time" name="time" value="" readonly="readonly" onclick="WdatePicker({ dateFmt: 'yyyy', maxDate: '%y' })"/>
		</p>
		<p class="p-item p2" style="display: block;float: left;margin-top: 16px">
			<input type="button" class="btn" value="查询" onclick="doSearch()"/>