-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathindex.html
135 lines (121 loc) · 3.62 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>Calendar demo</title>
<link rel="stylesheet" href="src/calendar.css">
<style type="text/css">
html {
font: 500 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
a {
text-decoration: none;
}
ul,
ol,
li {
list-style: none;
padding: 0;
margin: 0;
}
#demo {
width: 400px;
margin: 30px auto;
}
p {
margin: 0;
}
input {
margin: 10px 0;
height: 28px;
width: 200px;
padding: 0 6px;
border: 1px solid #ccc;
outline: none;
}
</style>
</head>
<body>
<div id="demo">
<h2>Inline calendar</h2>
<div id="one"></div>
<h2>Trigger calendar</h2>
<input type="text" id="dt" placeholder="trigger calendar">
<div id="two"></div>
<p><button type="button" id="add">Add input</button></p>
</div>
<script src="//cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script src="src/calendar.js"></script>
<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var data = [{
date: year + '-' + month + '-' + (date - 1),
value: 'hello'
}, {
date: year + '-' + month + '-' + date,
value: '上班'
}, {
date: new Date(year, month - 1, date + 1),
value: '吃饭睡觉打豆豆'
}, {
date: '2016-10-31',
value: '2016-10-31'
}];
// inline
var $ca = $('#one').calendar({
// view: 'month',
width: 320,
height: 320,
// startWeek: 0,
// selectedRang: [new Date(), null],
data: data,
monthArray: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
date: new Date(2016, 9, 31),
onSelected: function (view, date, data) {
console.log('view:' + view)
console.log('date:' + date)
console.log('data:' + (data || '无'));
},
viewChange: function (view, y, m) {
console.log(view, y, m)
}
});
// picker
$('#two').calendar({
trigger: '#dt',
// offset: [0, 1],
zIndex: 999,
data: data,
onSelected: function (view, date, data) {
console.log('event: onSelected')
},
onClose: function (view, date, data) {
console.log('event: onClose')
console.log('view:' + view)
console.log('date:' + date)
console.log('data:' + (data || '无'));
}
});
// Dynamic elements
var $demo = $('#demo');
var UID = 1;
$('#add').click(function () {
$demo.append('<input id="input-' + UID + '"><div id="ca-' + UID + '"></div>');
$('#ca-' + UID).calendar({
trigger: '#input-' + UID++
})
})
</script>
</body>
</html>