-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (115 loc) · 5.14 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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ractive.js datepicker decorator plugin</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker.min.css">
<link href="http://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="demo/main.css">
<!-- TODO add styles specific to this demo -->
<style type="text/css">
html {
font-size: initial; /* to keep 1rem from becoming 10px due to Bootstrap's resetting */
}
</style>
</head>
<body>
<!-- <a class="forkme" href="https://github.com/you/repo">Fork me on GitHub</a> -->
<header>
<h1>Ractive.js datepicker decorator plugin</h1>
<p class="strap">
<span class="download">download: <a href="./dist/ractive-decorators-datepicker.js">ractive-decorators-datepicker.js</a></span>
<span class="more-plugins">more plugins at <a href="https://ractive.js.org/resources/#plugins">ractive.js.org/resources/#plugins</a></span>
</p>
</header>
<main>
<p>This plugin is a decorator for <a href="https://github.com/mymth/vanillajs-datepicker">vanillajs-datepicker</a>.</p>
<p>To customize datepicker, set your options object to <code>datepickerDecorator.types.default</code>. You can also set up multiple types by adding options objects to <code>datepickerDecorator.types</code> using their names.<br>
The plugin allows you to use different date formats between datepicker UI and internal data by setting <code>datepickerDecorator.internalFormat</code>.</p>
<div id="demo" class="clearfix"></div>
<pre id="demo-template-view" class="prettyprint lang-html"></pre>
<pre id="demo-code-view" class="prettyprint lang-js"></pre>
</main>
<!-- add additional info such as your homepage here, if you want -->
<footer>
<p>Copyright © 2016 Hidenao Miyamoto. Licensed MIT</p>
</footer>
<!-- Demo template -->
<script id="demo-template" type="text/ractive">
<form>
<!-- input -->
<div class="form-group">
<label for="date">Date Input</label>
<input type="text" class="form-control" as-datepicker value="{{date}}">
<div class="row">
<p class="help-block col-xs-3">
Internal value:
<input type="text" class="form-control" value="{{date}}"></p>
</div>
</div>
<!-- date-range -->
<div class="form-group">
<label for="date-range">Date Range</label>
{{#dateRange}}
<div class="input-group input-daterange" as-datepicker>
<input type="text" class="form-control start-date" value="{{startDate}}">
<span class="input-group-addon">to</span>
<input type="text" class="form-control end-date" value="{{endDate}}">
</div>
<div class="row">
<div class="help-block col-xs-3">
Internal values:<br>
start:
<input type="text" class="form-control" value="{{startDate}}"></div>
<div class="help-block col-xs-3">
<br>
end:
<input type="text" class="form-control" value="{{endDate}}"></div>
</div>
{{/dateRange}}
</div>
</form>
</script>
<!-- Dependencies -->
<!--
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/ractive/ractive.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script>
<script src="./dist/ractive-decorators-datepicker.js"></script>
<!-- Demo code -->
<script id="demo-code">
datepickerDecorator.internalFormat = 'yyyy-mm-dd';
datepickerDecorator.types = {
default: {
autohide: true,
clearButton: true
},
todayButton: {
todayButton: true,
todayHighlight: true
}
};
ractive = new Ractive({
el: 'demo',
template: '#demo-template',
data: {
date: '2017-05-15',
dateRange: {
startDate: '2016-10-10',
endDate: '2016-10-16'
},
dateComponent: '2017-09-01'
},
decorators: {datepicker: datepickerDecorator},
});
</script>
<!-- Insert code into the page -->
<script src="demo/prettify.js"></script>
<script src="demo/demo.js"></script>
</body>
</html>