-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
158 lines (123 loc) · 3.98 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
<!DOCTYPE html>
<html>
<head>
<title>Pikaday Responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="dist/pikaday-package.css">
<link rel="stylesheet" href="demo-style.css">
<script src="dist/dependencies/pikaday-responsive-modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<h1>pikaday-responsive</h1>
<p>
A responsive datepicker built on top of Pikaday.
It shows the native datepicker on mobile devices and a nice JS-picker on desktop.
It is realised as a jQuery-Plugin.
</p>
<p>
More Infos & Download on <a href="https://github.com/mydea/PikadayResponsive">GitHub</a>
</p>
<p>
Created by: Francesco Novy
<br/><a href="http://fnovy.com">www.fnovy.com</a>
| <a href="mailto:[email protected]">[email protected]</a>
</p>
<h1>Default values</h1>
<p>
<label for="date1-input">Select a date:</label>
<input name="date" type="date" id="date1" class="test class"/>
</p>
<h2>The output-value of the input-field is:</h2>
<p id="output1" class="output"></p>
<h1>Change output format</h1>
<p>You can specify an output format as a Moment.js string. E.g. "X" (UNIX timestamp):</p>
<p>
<label for="date2-input">Select a date:</label>
<input name="date" type="text" id="date2" value="1442613600"/>
</p>
<h2>The output-value of the input-field is:</h2>
<p id="output2" class="output"></p>
<h1>Change display format</h1>
<p>You can also specifiy the display format as you wish. E.g. "Do MMM YYYY". You can use the dateObject to implement
clear/today buttons.</p>
<p>
<label for="date3-input">Select a date:</label>
<input name="date" type="date" id="date3"/>
<button id="clear">Clear</button>
<button id="today">Today</button>
</p>
<h2>The output-value of the input-field is:</h2>
<p id="output3" class="output"></p>
<h1>Remote Triggering</h1>
<p>
By using labels, you can trigger date pickers from different places on your page.
</p>
<label for="date1-input">
>> Click to open first date picker
</label>
<h1>Date Picker with min and max date</h1>
<p>
By using pikaday option minDate and maxDate you can set up min and max date for native date picker.<br>
NOTE: This feature is only available for Android devices.
</p>
<p>
<label for="date4-input">Select a date:</label>
<input name="date" type="date" id="date4"/>
</p>
<h2>The output-value of the input-field is:</h2>
<p id="output4" class="output"></p>
</div>
<script src="dist/dependencies/jquery.min.js"></script>
<script src="dist/dependencies/moment.min.js"></script>
<script src="dist/dependencies/pikaday.min.js"></script>
<script src="src/pikaday-responsive.js"></script>
<script>
var $date1 = $("#date1");
var instance1 = pikadayResponsive($date1);
$date1.on("change", function() {
$("#output1").html($(this).val());
});
var $date2 = $("#date2");
var instance2 = pikadayResponsive($date2, {
outputFormat: "X"
});
$date2.on("change", function() {
$("#output2").html($(this).val());
});
var $date3 = $("#date3");
var instance3 = pikadayResponsive($date3, {
format: "Do MMM YYYY",
outputFormat: "X"
});
var $date4 = $("#date4");
var today = new Date();
var minDate = new Date();
var maxDate = new Date();
minDate.setDate(today.getDate() + 3);
maxDate.setDate(today.getDate() + 365);
var instance4 = pikadayResponsive($date4, {
format: "DD/MM/YYYY",
outputFormat: "DD/MM/YYYY",
pikadayOptions: {
minDate: minDate,
maxDate: maxDate,
},
});
instance4.setDate(minDate);
$date3.on("change", function() {
$("#output3").html($(this).val());
});
$date4.on("change", function() {
$("#output4").html($(this).val());
});
$("#clear").click(function() {
instance3.setDate(null);
});
$("#today").click(function() {
instance3.setDate(moment());
});
</script>
</body>
</html>