forked from ciaoca/cxCalendar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (105 loc) · 3.36 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxCalendar 日期选择器 » 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="css/jquery.cxcalendar.css">
<style>
body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
h1,h2,h3{font-size:36px;line-height:1;}
h2{font-size:24px;}
h3{font-size:18px;}
fieldset{margin:2em 0;}
fieldset legend{font-weight:bold;font-size:16px;line-height:2;}
input,select,button{padding:0.5em;}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}
.wrap{width:800px;margin:0 auto;padding:20px 40px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div class="wrap">
<h1>jQuery cxCalendar 日期选择器</h1>
<h2>示例</h2>
<fieldset>
<legend>默认</legend>
<label for="date_a">选择日期：</label>
<input id="date_a" name="mydate" type="text" readonly>
</fieldset>
<fieldset>
<legend>在 <input> 的 value 中设置默认值</legend>
<label for="date_b">选择日期：</label>
<input id="date_b" type="text" value="1988-1-31" readonly>
</fieldset>
<fieldset>
<legend>在参数中设置默认日期</legend>
<label for="date_c">选择日期：</label>
<input id="date_c" type="text" value="" readonly>
</fieldset>
<fieldset>
<legend>选择日期和时间</legend>
<label for="date_d">选择日期：</label>
<input id="date_d" name="mydate" type="text" readonly>
</fieldset>
<fieldset>
<legend>限制可选日期</legend>
<label for="date_e">选择日期：</label>
<input id="date_e" name="mydate" type="text" readonly>
<!-- <input id="date_e" name="mydate" type="text" readonly data-onday="1,2,3,4,5" data-unday="1,1-5,2017-1-10"> -->
</fieldset>
<fieldset>
<legend>自定义节假日</legend>
<label for="date_f">选择日期：</label>
<input id="date_f" name="mydate" type="text" readonly>
</fieldset>
<p><a target="_blank" href="http://code.ciaoca.com/jquery/cxCalendar/demo/">查看更多示例</a></p>
<h2>文档</h2>
<ul>
<li><a target="_blank" href="https://github.com/ciaoca/cxCalendar">Github</a></li>
<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxcalendar/">中文文档</a></li>
</ul>
<h2>作者</h2>
<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>
<p>Released under the MIT license</p>
</div>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="js/jquery.cxcalendar.js"></script>
<script src="js/jquery.cxcalendar.languages.js"></script>
<script>
// 默认
$('#date_a').cxCalendar();
// 在 value 中有默认值
$('#date_b').cxCalendar();
// 在参数中设置默认日期
$('#date_c').cxCalendar({
date: '1988/1/31'
});
// 选择日期和时间
$('#date_d').cxCalendar({
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss'
});
// 限制可选日期
$('#date_e').cxCalendar({
wday: 0,
onday: [1,2,3,4,5],
// type: 'datetime',
// format: 'YYYY-MM-DD HH:mm:ss',
unday: [
'3',
'7-5',
'7-15',
'7-25',
'2017-7-10',
'2017-7-20',
'2017-7-30'
],
endDate: '2017-08-31'
});
// 自定义节假日
$('#date_f').cxCalendar({
baseClass: 'cxcalendar_holyday'
});
</script>
</body>
</html>