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

 

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'});"/>

  效果展示:

  默认值

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

  最大开始时间

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

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

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

  说明:

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

  禁用了清空按钮;

  日期格式: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" />

  效果展示:

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

2019/01/14

  上面关于点击事件的代码存在bug:就是第一次变换查询格式,后面的日期格式会变化,以后不管你再怎么变换查询条件,

后面的日期格式都不会生效,解决方案:

  使用jquery先将绑定的点击事件移除掉,再次绑定即可。

$('#V_START').unbind();
$('#V_START').click(function() {
WdatePicker({
isShowClear : false,
dateFmt : dateFmt,
minDate : s_minDate,
maxDate : s_maxDate
})
});
$('#V_END').unbind();
$('#V_END').click(function() {
WdatePicker({
isShowClear : false,
dateFmt : dateFmt,
minDate : e_minDate,
maxDate : e_maxDate
})
});
 
上一篇:C# 根据第几周和季度 获取开始时间和结束时间


下一篇:datepicker约束开始时间和结束时间