forked from singod/jeDate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jedate.html
240 lines (228 loc) · 8.33 KB
/
jedate.html
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jeDate日期控件</title>
<script type="text/javascript" src="jedate/jquery-1.7.2.js"></script>
<script type="text/javascript" src="jedate/jquery.jedate.js"></script>
<link type="text/css" rel="stylesheet" href="jedate/skin/jedate.css">
<style>
.bodys{ padding:50px 0 0 50px;}
.datainp{ width:200px; height:30px; border:1px #A5D2EC solid;}
.datep{ margin-bottom:40px; line-height:24px; margin-right:15px;}
.wicon{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAQCAYAAADj5tSrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNi8xNS8xNGnF/oAAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAoElEQVQ4jWPceOnNfwYqAz9dYRQ+E7UtwAaGjyUsDAyYYUgJ2HT5LXZLcEmSCnA6duOlN///////H0bDALl8dPH/////Z8FuNW6Qtvw2nL3lyjsGBgYGhlmRqnj1kGwJuqHIlhJlCXq8EOITEsdqCXLEbbr8FisfFkTo+vBZRFZwERNEFFkCiw90nxJtCalxQmzegltCzVyP1RJq5HZ8AABuNZr0628DMwAAAABJRU5ErkJggg=="); background-repeat:no-repeat; background-position:right center;}
</style>
</head>
<body class="bodys">
<div style="width:100%; margin-bottom:50px; overflow:hidden;">
<ul>
<li class="datep"><a href="http://www.jayui.com/jedate/">详细日期控件API</a></li>
<li class="datep" style="width:700px;">jeDate除了包含初始化日期加减N、日期标注点、输入框可以直接输入时间、设定年月(YYYY-MM)、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,操作等常规功能外,根据不同的日期格式,显示不同内容,还拥有更多趋近完美的解决方案。<br/><span style="color: green">您可以免费将她用于任何个人项目。但是不能去除头部信息。</span> QQ群:516754269</li>
<li>
<span style="color: red">jeDate从3.5版本开始改为jquery版本的日期控件</span><br/><br/>
<span style="color: red">此为部分个例展示,更多请看</span> <a href="http://www.jayui.com/jedate/">详细日期控件API</a>。<br/><br/>
<input class="datainp wicon" id="datefix" type="text" placeholder="YYYY-MM-DD" readonly><br/><br/><br/>
<div id="refix"></div><br/><br/>
</li>
<!--<input type="checkbox" formatval="YYYY-MM-DD" onclick="thatcheckbox(this)">-->
<li class="datep"><input class="datainp" id="inyyyy" type="text" placeholder="YYYY年" onclick="$.jeDate('#inyyyy',{insTrigger:false,isTime:true,format:'YYYY年'})" value="" readonly></li>
<li class="datep"><input class="datainp wicon" id="optsdate" type="text" placeholder="开始日期" value="" readonly></li>
<li class="datep">
<input class="datainp wicon" id="inpstart" type="text" placeholder="开始日期" value="" readonly>
<input class="datainp wicon" id="inpend" type="text" placeholder="结束日期" readonly>
</li>
<li class="datep"><input class="datainp wicon" id="date01" type="text" placeholder="YYYY-MM-DD hh:mm:ss" value="" readonly></li>
<li class="datep"><input class="datainp wicon" id="date02" type="text" placeholder="YYYY-MM-DD hh:mm" value="" readonly></li>
<li class="datep"><input class="datainp wicon" id="date022" type="text" placeholder="YYYY-MM-DD hh" value="" readonly></li>
<li class="datep"><input class="datainp wicon" id="date03" type="text" placeholder="YYYY-MM-DD" readonly></li>
<li class="datep"><input class="datainp wicon" id="date04" type="text" placeholder="YYYY-MM" readonly></li>
<li class="datep"><input class="datainp wicon" id="dateyyyy" type="text" placeholder="YYYY" readonly></li>
<li class="datep"><input class="datainp wicon" id="date05" type="text" placeholder="hh:mm:ss" readonly></li>
<li class="datep"><input class="datainp wicon" id="dateymdh" type="text" placeholder="YYYY-MM-DD hh" readonly></li>
<li class="datep"><input class="datainp wicon" id="datehz" type="text" placeholder="hh" readonly></li>
<li class="datep"><input class="datainp wicon" id="test" type="text" placeholder="hh" onclick="testShow(this)" readonly></li>
</ul>
</div>
<script type="text/javascript">
$("#datefix").jeDate({
//isinitVal:true,
//festival:true,
//ishmsVal:false,
fixedCell:"refix",
//isClear:false,
//isok:false,
hmsSetVal:{hh:00,mm:00,ss:00},
//isvalid:["3,4,8,10",true],
initAddVal:{MM:"+3",DD:"+2"},
minDate: '2016-06-16',
maxDate: '2025-06-16',
format:"YYYY-MM-DD hh:mm:ss",
//format:"hh:mm",
zIndex:3000,
choosefun:function (elem,val,date) {
console.log(val)
console.log(date)
//alert(date)
},
okfun:function (elem,val,date) {
console.log(val)
console.log(date)
//alert(date)
}
})
//var dt = new Date(),
// sm = dt.setMonth(13),
// gm = dt.getFullYear()
console.log($.timeStampDate("2017-11-16 10:35:22",false))
console.log($.timeStampDate("1513391722",true))
//console.log(gm)
var cancel ={
minDate:'2015-06-16',
maxDate:'2017-12-16'
}
var opts = $.extend({
type:"je",
minDate:undefined,
maxDate:undefined
},cancel);
if (opts.type == "je") {
$("#optsdate").jeDate({
isinitVal: true,
festival: true,
trigger: "click mouseenter focus",
isTime:false,
ishmsVal: false,
minDate: opts.minDate,
maxDate: opts.maxDate,
format: "YYYY-MM-DD hh:mm",
zIndex: 3000,
okfun:function (elem,val) {
alert(elem)
}
})
}
//实现日期选择联动
var start = {
format: 'YYYY-MM-DD',
minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
//festival:true,
maxDate: $.nowDate({DD:0}), //最大日期
choosefun: function(elem,datas){
end.minDate = datas; //开始日选好后,重置结束日的最小日期
endDates();
},
okfun:function (elem,datas) {
alert(datas)
}
};
var end = {
format: 'YYYY年MM月DD日',
minDate: $.nowDate({DD:0}), //设定最小日期为当前日期
//festival:true,
maxDate: '2099-06-16 23:59:59', //最大日期
choosefun: function(elem,datas){
start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
}
};
function endDates() {
end.trigger = false;
$("#inpend").jeDate(end);
}
$("#inpstart").jeDate(start);
$("#inpend").jeDate(end);
$("#date01").jeDate({
isinitVal:true,
//festival:true,
ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM-DD hh:mm:ss",
zIndex:3000,
})
$("#date02").jeDate({
isinitVal:true,
//festival:true,
ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM-DD hh:mm",
zIndex:3000,
})
$("#date022").jeDate({
isinitVal:true,
//festival:true,
ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM-DD hh:zz",
zIndex:3000,
})
$("#date03").jeDate({
isinitVal:true,
//festival:true,
ishmsVal:false,
minDate: '2016-06-16',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM-DD",
zIndex:3000,
})
$("#date04").jeDate({
isinitVal:true,
//festival:true,
ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM",
zIndex:3000,
})
$("#date05").jeDate({
isinitVal:true,
//festival:true,
//ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"hh:mm:ss",
zIndex:3000,
})
$("#dateyyyy").jeDate({
isinitVal:true,
//festival:true,
//ishmsVal:false,
determine:false,
format:"YYYY年",
zIndex:3000,
})
$("#dateymdh").jeDate({
isinitVal:true,
//festival:true,
//ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"YYYY-MM-DD hh:zz",
zIndex:3000,
})
$("#datehz").jeDate({
isinitVal:true,
//festival:true,
//ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"hh:zz",
zIndex:3000,
})
function testShow(elem){
$.jeDate(elem,{
trigger:false,
isinitVal:true,
//festival:true,
//ishmsVal:false,
minDate: '2016-06-16 23:59:59',
maxDate: $.nowDate({DD:0}),
format:"hh",
zIndex:3000,
})
}
</script>
</body>
</html>