myDate97 设置开始时间和结束时间

weixin_33795743

于 2018-08-28 17:26:00 发布

阅读量1.1k

点赞数

文章标签： c# javascript ViewUI

博客介绍了myDate97设置开始时间和结束时间的方法。包含简单示例，如引入相关js、编写js和html代码，还说明了设置默认时间等注意事项；也有综合运用，统计条件分日、月、年，给出不同时间单位的选择范围及对应代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

myDate97 设置开始时间和结束时间

CreationTime--2018年8月28日16点46分

Author:Marydon

1.简单示例

　　第一步：引入My97DatePicker/WdatePicker.js

　　第二步：js代码

<script type="text/javascript">
　　window.onload = function() {
        // 开始时间默认值为本月1号
        jQuery('#V_START').val(new Date().format('yyyy-MM-01'));
        // 结束时间默认值为今天
        jQuery('#V_END').val(new Date().format('yyyy-MM-dd'));
　　}
</script>

　　第三步：html代码

开始时间：
<input name="V_START" class="TextBox" readonly="readonly" id="V_START" type="text"
    onclick="WdatePicker({isShowClear:false, dateFmt:'yyyy-MM-dd', maxDate:'#F{$dp.$D(\'V_END\')}'});"/>
结束时间：
<input name="V_END" class="TextBox" readonly="readonly" id="V_END" type="text"
    onclick="WdatePicker({isShowClear:false, dateFmt:'yyyy-MM-dd', minDate:'#F{$dp.$D(\'V_START\')}', maxDate:'%y-%M-%d'});"/>

　　效果展示：

　　默认值

　　最大开始时间

　　最小结束时间与最大结束时间

　　说明：

　　开始时间和结束时间最好设置默认时间，既有利于数据查出指定区间数据而不是所有数据，又有利于提高用户体验；

　　禁用了清空按钮；

　　日期格式：yyyy-MM-dd；

　　开始时间的最大日期不能大于结束时间；

　　结束时间的最小日期不能小于开始时间；

　　结束时间的最大日期不能超过系统当前时间。

2.综合运用

　　需求说明：

　　统计条件为时间段（日、月、年）；

　　以日单位：x年x月x日- x年x月x日（最大选择范围14天）；

　　月：x年x月- x年x月（最大选择范围12个月）；

　　年：x年- x年（最大选择范围10年）。

　　js代码

<script type="text/javascript">
	// 默认值
	// 选中年-月-日
	$get('selectDate').selectedIndex = 2;
	ctrlDateFormat("yyyy-MM-dd");
	
	function ctrlDateFormat(dateFmt){
		// 开始日期取值范围
		var s_minDate = "";
		var s_maxDate = "#F{$dp.$D('V_END')}";
		// 结束日期取值范围
		var e_minDate = "#F{$dp.$D('V_START')}";
		var e_maxDate = "";
		// 默认日期
		var defaultDate = "";
		// 获取系统当前日期
        var date = new Date();
        // 获取当前年
        var currentYear = date.getFullYear();
        // 获取当前月
        var currentMonth = date.getMonth() + 1;
        currentMonth = (currentMonth <= 9)?"0" + currentMonth:currentMonth;
        // 获取当前日
        var currentDay = date.getDate();
        currentDay = (currentDay <= 9)?"0" + currentDay:currentDay;
		
		switch (dateFmt) {
			case "yyyy":
				// 选择范围： 10年
				s_minDate = "#F{$dp.$D('V_END',{y:-9})}";
				e_maxDate = "#F{$dp.$D('V_START', {y:+9})}";
				defaultDate = currentYear;
				break;
			case "yyyy-MM":
				// 选择范围： 12个月
				s_minDate = "#F{$dp.$D('V_END',{M:-11})}";
				e_maxDate = "#F{$dp.$D('V_START', {M:+11})}";
				defaultDate = currentYear + "-" + currentMonth;
				break;
			case "yyyy-MM-dd":
				// 选择范围： 14天
				s_minDate = "#F{$dp.$D('V_END',{d:-13})}";
				e_maxDate = "#F{$dp.$D('V_START', {d:+13})}";
				defaultDate = currentYear + "-" + currentMonth + "-" + currentDay;
				break;
			default:
				break;
		};
		
		// 设置默认值
		$get('V_START').value = defaultDate;
		$get('V_END').value = defaultDate;
		// 开始日期、结束日期绑定点击事件    		
		$get('V_START').onclick = function () {
			WdatePicker({
				isShowClear:false,
				dateFmt:dateFmt,
				minDate:s_minDate,
				maxDate:s_maxDate
			});
		};
		$get('V_END').onclick = function () {
			WdatePicker({
				isShowClear:false,
				dateFmt:dateFmt,
				minDate:e_minDate,
				maxDate:e_maxDate
			});
		};
	}
</script>

　　html代码

查询格式
<select onchange="ctrlDateFormat(this.value)" id="selectDate">
	<option value="yyyy">年</option>
    <option value="yyyy-MM">年-月</option>
    <option value="yyyy-MM-dd">年-月-日</option>
</select>
开始时间：<input name="V_START" class="TextBox" readonly="readonly" id="V_START" type="text" />
结束时间：<input name="V_END" class="TextBox" readonly="readonly" id="V_END" type="text" />

　　效果展示：