My97DatePicker日期控件实现按日、周、月、季、年选择时间段
前台页面需要使用日期控件时，同事选择了My97DatePicker
，功能还是挺强大的，在使用过程中需要实现按日、按周、按月、按季度、按年选择时间的功能。
控件自身提供了按日、按月和按年选择的功能，但是选择周和选择季度没有，鉴于方便，在选择周时就使用了选择日的状态，选择了日后再计算这一天所属的周的起始和结束日期。
在选择季度时，使用了选择月份的状态，选择月份后计算所属的季度的开始和结束日期。
控件本身有很详细的帮助文档，页面
http://www.my97.net/dp/demo/index.htm，关于控件的使用都可以参考官方的demo，而且可以在线看到效果，直观简单，就是公司里上网太不方便。
这里记录几个发现的问题：
1. 控件可以在onfocus或者onclick事件中创建，实现弹出时间选择框的功能，但是发现在使用onfocus时，当选择了一次时间后，焦点默认还是在此输入框上，所以当想更改时间时，需要改变焦点再重新点击此输入框，操作上有问题，所以如果是实现点击弹出时间选择框的话，还是使用onclick事件比较合理。
2. $dp.$DV方法文档上说是返回时间字符串，但是实际使用中返回的是控件自定义的时间对象，有y、M、d、H、m、s属性，分别返回年、月、日、时、分、秒。所以为了获取到字符串，不得不自己写转换函数。
下面是这个小功能的核心代码，里面用到的关于控件的方法都是比较常用的，在公司里上网环境查控件的文档实在是太麻烦了，以后我自己看下下面的代码，基本的使用应该都木有问题了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<
table
>
<
tr
>
<
th
>查询时间类型</
th
>
<
td
>
<
select
id
=
"selType"
name
=
"dept"
style
=
"width: 150px;"
>
<
option
value
=
"1"
>按日</
option
>
<
option
value
=
"2"
>按周</
option
>
<
option
value
=
"3"
>按月</
option
>
<
option
value
=
"4"
>按季</
option
>
<
option
value
=
"5"
>按年</
option
>
</
select
>
</
td
>
<
th
>统计时间</
th
>
<
td
>
<
input
id
=
"starttime"
class
=
"Wdate"
onclick
=
"createWdatePicker();"
/>
</
td
>
</
tr
>
<
tr
>
<
th
>选中时间段</
th
>
<
td
>
<
input
id
=
"showstarttime"
type
=
"text"
readonly
=
"readonly"
/>
</
td
>
<
th
>到</
th
>
<
td
>
<
input
id
=
"showendtime"
type
=
"text"
readonly
=
"readonly"
/>
</
td
>
</
tr
>
</
table
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<script type=
"text/javascript"
>
/**
选择时间的输入框被选中时，创建datepicker控件
根据设置不同dateFmt 格式，使空间支持选择日，周，月，季，年
*/
function
createWdatePicker() {
var
type = $(
"#selType"
).val();
if
(type == 1) {
//按日
WdatePicker({
readOnly :
true
,
dateFmt :
'yyyy-MM-dd'
,
onpicked : pickTime,
isShowWeek :
true
,
maxDate :
'%y-%M-%d'
});
}
else
if
(type == 2) {
//按周
WdatePicker({
readOnly :
true
,
dateFmt :
'yyyy-MM-dd'
,
onpicked : pickTime,
isShowWeek :
true
,
maxDate :
'%y-%M-%d'
});
}
else
if
(type == 3) {
//按月
WdatePicker({
readOnly :
true
,
dateFmt :
'yyyy-MM'
,
onpicked : pickTime,
isShowWeek :
true
,
maxDate :
'%y-%M-%d'
});
}
else
if
(type == 4) {
//按季
WdatePicker({
readOnly :
true
,
dateFmt :
'yyyy-MM'
,
onpicked : pickTime,
isShowWeek :
true
,
maxDate :
'%y-%M-%d'
});
}
else
if
(type == 5) {
//按年
WdatePicker({
readOnly :
true
,
dateFmt :
'yyyy'
,
onpicked : pickTime,
isShowWeek :
true
,
maxDate :
'%y-%M-%d'
});
}
};
/**
控件时间选中后，onpicked 事件对应的方法
根据不同的选择类型：日周月季年，计算最终选中的时间段
*/
function
pickTime() {
var
type = $(
"#selType"
).combobox(
"getValue"
);
if
(type == 1) {
//按日
//获取控件选择的时间，格式是根据设置的dateFmt : 'yyyy-MM-dd'
var
datetime = $dp.cal.getDateStr();
$(
"#showstarttime"
).val(datetime +
" 00:00:00"
);
$(
"#showendtime"
).val(datetime +
" 23:59:59"
);
}
else
if
(type == 2) {
//按周
var
datetime = $dp.cal.getDateStr();
//获取星期几，控件提供的方法
var
dstart = -$dp.cal.getP(
'w'
,
'w'
);
var
dend = dstart + 6;
//计算一周的开始日期和结束日期，这个方法文档说返回的是字符串，但是实际中返回的是控件定义的时间对象，所以后面得自己转换成字符串
var
datestart = $dp.$DV(datetime, {
d : dstart
});
var
dateend = $dp.$DV(datetime, {
d : dend
});
$(
"#showstarttime"
).val(dateToString(datestart) +
" 00:00:00"
);
$(
"#showendtime"
).val(dateToString(dateend) +
" 23:59:59"
);
}
else
if
(type == 3) {
//按月
var
y = $dp.cal.getP(
'y'
,
'yyyy'
);
var
M = $dp.cal.getP(
'M'
,
'M'
);
var
d =
new
Date(y, M, 0);
var
datestart = {};
datestart.y = y;
datestart.M = M;
datestart.d = 1;
var
dateend = {};
dateend.y = y;
dateend.M = M;
//获取月的最后一天
dateend.d = d.getDate();
$(
"#showstarttime"
).val(dateToString(datestart) +
" 00:00:00"
);
$(
"#showendtime"
).val(dateToString(dateend) +
" 23:59:59"
);
}
else
if
(type == 4) {
//按季
var
y = $dp.cal.getP(
'y'
,
'yyyy'
);
var
M = $dp.cal.getP(
'M'
,
'M'
);
//计算季度的开始月份和结束月份
var
startM = parseInt((M - 1) / 3) * 3 + 1;
var
endM = startM + 2;
var
d =
new
Date(y, endM, 0);
var
datestart = {};
datestart.y = y;
datestart.M = startM;
datestart.d = 1;
var
dateend = {};
dateend.y = y;
dateend.M = endM;
//获取最后一个月的最后一天
dateend.d = d.getDate();
$(
"#showstarttime"
).val(dateToString(datestart) +
" 00:00:00"
);
$(
"#showendtime"
).val(dateToString(dateend) +
" 23:59:59"
);
}
else
if
(type == 5) {
//按年
var
y = $dp.cal.getP(
'y'
,
'yyyy'
);
//这里可以直接字符串拼凑写死，但是为了格式统一，还是创建对象在转化吧
var
datestart = {};
datestart.y = y;
datestart.M = 1;
datestart.d = 1;
var
dateend = {};
dateend.y = y;
dateend.M = 12;
dateend.d = 31;
$(
"#showstarttime"
).val(dateToString(datestart) +
" 00:00:00"
);
$(
"#showendtime"
).val(dateToString(dateend) +
" 23:59:59"
);
}
};
/**
控件返回的时间对象转换成字符串输出
控件的时间对象有y,M,d,H,m,s属性，分别返回年，月，日，时，分，秒
*/
function
dateToString(date) {
var
strdate =
""
;
strdate = strdate + date.y +
"-"
;
var
M = date.M >= 10 ? date.M : (
"0"
+ date.M);
strdate = strdate + M;
var
d = date.d >= 10 ? date.d : (
"0"
+ date.d);
strdate = strdate +
"-"
+ d;
return
strdate;
};
</script>
|