-
Notifications
You must be signed in to change notification settings - Fork 152
/
index.html
278 lines (274 loc) · 14.5 KB
/
index.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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jeDate日期控件(原生JS) - 演示</title>
<link type="text/css" rel="stylesheet" href="test/jeDate-test.css">
<link type="text/css" rel="stylesheet" href="skin/jedate.css">
<script type="text/javascript" src="src/jedate.js"></script>
</head>
<body>
<div class="jebody">
<blockquote class="jequote">
<p style="text-align: center;font-size:24px;padding-bottom: 15px;">jeDate日期控件 - (原生JS)</p>
jeDate6.5.0是一款原生JS开发的<span style="color: red">不依赖任何第三方库</span>大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！</span> <br/>
jeDate群01：516754269（已满） jeDate群02：73371254<br/><br/>
<span style="color: red">此为部分个例展示，更多请看</span> <a href="http://www.jemui.com" style="color:#0a60d6;text-decoration:underline;">详细日期控件API</a>。<br/><br/>
</blockquote>
<div class="jewarp">
<h3 class="gray">常规选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">年选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test01" placeholder="YYYY"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test02" placeholder="YYYY-MM"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月日选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test03" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月日时分秒选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test04" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">时分秒选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test05" placeholder="hh:mm:ss"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">英文语言</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">年月日选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="enYMD" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月日时分秒</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="enYMDhms" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">时分秒选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="enhms" placeholder="hh:mm:ss"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">自定义主题色</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">蓝色主题</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="testblue" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">绿色主题</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="testgray" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">红色主题</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="testred" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">区域范围选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">年范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test06" placeholder="YYYY"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test07" placeholder="YYYY-MM"></div>
</div>
<div class="jeitem">
<label class="jelabel">日范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test08" placeholder="YYYY-MM-DD"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">区域范围双面板选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">年范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test09" placeholder="YYYY"></div>
</div>
<div class="jeitem">
<label class="jelabel">年月范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test10" placeholder="YYYY-MM"></div>
</div>
<div class="jeitem">
<label class="jelabel">日范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test11" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">日时分秒范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test11A" placeholder="YYYY-MM-DD hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">时分秒范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test11B" placeholder="hh:mm:ss"></div>
</div>
<div class="jeitem">
<label class="jelabel">时分范围选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test11C" placeholder="hh:mm"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">自定义格式选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">自定义格式</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test12" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">自定义格式</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test13" placeholder="MM-DD-YYYY"></div>
</div>
<div class="jeitem">
<label class="jelabel">自定义格式</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test14" placeholder="DD/MM/YYYY"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">一次绑定多个选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">第一个</label>
<div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">第二个</label>
<div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">第三个</label>
<div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY/MM/DD"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">DIV元素选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">第一个</label>
<div class="jeinpbox"><div class="jeindiv divmore" placeholder="YYYY年MM月DD日"></div></div>
</div>
<div class="jeitem">
<label class="jelabel">第二个</label>
<div class="jeinpbox"><div class="jeindiv divmore" placeholder="YYYY-MM-DD"></div></div>
</div>
<div class="jeitem">
<label class="jelabel">第三个</label>
<div class="jeinpbox"><div class="jeindiv divmore" placeholder="YYYY/MM/DD"></div></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">左边多类选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">单面板选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="short" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">双面板选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="shortboth" placeholder="YYYY年MM月DD日"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">YYYYMMDD格式</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">单面板选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="dateymd" placeholder="YYYYMMDD"></div>
</div>
<div class="jeitem">
<label class="jelabel">双面板选择</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="dateymdboth" placeholder="YYYYMMDD"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">其它功能展示选择</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">默认初始赋值</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test15" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">选中后的回调</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test16" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">日期切换的回调</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test17" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel" style="color:red;">双击输入框触发</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test18" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">设置自定义值</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test19" placeholder="YYYY-MM-DD"></div>
</div>
<div class="jeitem">
<label class="jelabel">点击图标</label>
<div class="jeinpbox">
<input type="text" class="jeinput" id="testico" placeholder="YYYY-MM-DD">
<div class="icons jebtns" onclick="jeDate('#testico',{trigger:false,format: 'YYYY-MM-DD'})"></div>
</div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">有效、无效日期限制</h3>
<div class="content">
<div class="jeitem">
<label class="jelabel">有效日期正向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test20" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">无效日期正向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test22" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">指定日期正向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test24" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">有效日期反向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test21" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">无效日期反向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test23" placeholder="YYYY年MM月DD日"></div>
</div>
<div class="jeitem">
<label class="jelabel">指定日期反向限制</label>
<div class="jeinpbox"><input type="text" class="jeinput" id="test25" placeholder="YYYY年MM月DD日"></div>
</div>
</div>
</div>
<div class="jewarp">
<h3 class="gray">直接展示日历</h3>
<div class="content">
<div class="jefixeitem" id="show01"></div>
<div class="jefixeitem" id="show02"></div>
<div class="jefixeitem" id="show03"></div>
<div class="jefixeitem" id="show04"></div>
</div>
</div>
</div>
<script type="text/javascript" src="test/demo.js"></script>
</body>
</html>