-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
65 lines (54 loc) · 1.66 KB
/
example.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
<html>
<head>
<meta charset="utf-8">
<title>Month Picker Example</title>
<link type="text/css" rel="stylesheet" href="month-picker.css"/>
<link type="text/css" rel="stylesheet" href="example.css"/>
<script src="test/jquery.js"></script>
<script src="month-picker.js"></script>
<script>
$(function() {
var monthPicker = new MonthPicker({
animated: true
});
monthPicker.model().on('change:year', function() { updateInput('year') });
monthPicker.model().on('change:month', function() { updateInput('month') });
updateInput('year');
updateInput('month');
$('body').append(monthPicker.el);
$('button#set').click(function() {
var year = getInputValue('year');
var month = getInputValue('month');
updateModel('year', year, function() { return year > 0 });
updateModel('month', month, function() { return month >= 1 && month <= 12 });
});
function updateModel(propertyName, value, conditionIsMet) {
if(conditionIsMet())
monthPicker.model().set(propertyName, value);
else
updateInput(propertyName);
}
function updateInput(propertyName) {
var value = monthPicker.model().get(propertyName);
$('input#' + propertyName).val(value);
}
function getInputValue(propertyName) {
return parseInt($('input#' + propertyName).val());
}
});
</script>
</head>
<body>
<p>
<label>
Year
<input id="year"/>
</label>
<label>
Month
<input id="month"/>
</label>
<button id="set">Set</button>
</p>
</body>
</html>