kea-rails 2.0.0.pre.alpha5 → 2.0.0.pre.alpha6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/kea/bindings/date_picker.js +33 -0
- data/app/assets/javascripts/kea/extenders/date.js +10 -0
- data/app/assets/javascripts/kea/kea_dependencies.js +1 -0
- data/app/assets/stylesheets/kea/kea.css.sass +1 -1
- data/lib/kea-rails/version.rb +1 -1
- data/vendor/assets/components/pikaday/CHANGELOG.md +68 -0
- data/vendor/assets/components/pikaday/LICENSE +36 -0
- data/vendor/assets/components/pikaday/README.md +321 -0
- data/vendor/assets/components/pikaday/bower.json +29 -0
- data/vendor/assets/components/pikaday/component.json +17 -0
- data/vendor/assets/{stylesheets → components/pikaday/css}/pikaday.css +39 -7
- data/vendor/assets/components/pikaday/css/site.css +42 -0
- data/vendor/assets/components/pikaday/examples/amd.html +50 -0
- data/vendor/assets/components/pikaday/examples/bound-container.html +52 -0
- data/vendor/assets/components/pikaday/examples/calendars.html +57 -0
- data/vendor/assets/components/pikaday/examples/container.html +52 -0
- data/vendor/assets/components/pikaday/examples/jquery-amd.html +54 -0
- data/vendor/assets/components/pikaday/examples/jquery.html +46 -0
- data/vendor/assets/components/pikaday/examples/moment.html +53 -0
- data/vendor/assets/components/pikaday/examples/positions.html +106 -0
- data/vendor/assets/components/pikaday/examples/trigger.html +46 -0
- data/vendor/assets/components/pikaday/examples/weeknumbers.html +41 -0
- data/vendor/assets/components/pikaday/index.html +43 -0
- data/vendor/assets/components/pikaday/package.json +45 -0
- data/vendor/assets/{javascripts → components/pikaday}/pikaday.js +185 -52
- data/vendor/assets/components/pikaday/plugins/pikaday.jquery.js +52 -0
- data/vendor/assets/components/pikaday/scss/pikaday.scss +199 -0
- data/vendor/assets/components/pikaday/tests/methods.js +26 -0
- data/vendor/assets/components/pikaday/tests/module.js +24 -0
- metadata +27 -4
@@ -0,0 +1,42 @@
|
|
1
|
+
html { margin: 0; padding: 0; }
|
2
|
+
body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; }
|
3
|
+
|
4
|
+
h1 { font-size: 1.75em; margin: 0 0 0.6em 0; }
|
5
|
+
h2 { font-size: 1.25em; margin: 0 0 0.6em 0; }
|
6
|
+
|
7
|
+
a { color: #2996cc; }
|
8
|
+
a:hover { text-decoration: none; }
|
9
|
+
|
10
|
+
p { line-height: 1.5em; }
|
11
|
+
.small { color: #666; font-size: 0.875em; }
|
12
|
+
.large { font-size: 1.25em; }
|
13
|
+
|
14
|
+
|
15
|
+
label {
|
16
|
+
font-weight: bold;
|
17
|
+
}
|
18
|
+
|
19
|
+
input[type="text"] {
|
20
|
+
margin: 0.5em 0 3em 0;
|
21
|
+
padding: 0.5em;
|
22
|
+
}
|
23
|
+
|
24
|
+
button#datepicker-button {
|
25
|
+
margin-bottom: 3em;
|
26
|
+
}
|
27
|
+
|
28
|
+
.flow-element {
|
29
|
+
display: inline-block;
|
30
|
+
margin-right: 3em;
|
31
|
+
vertical-align: top;
|
32
|
+
}
|
33
|
+
.flow-element:last-child {
|
34
|
+
margin-right: 0;
|
35
|
+
}
|
36
|
+
.flow-element input {
|
37
|
+
margin-top: 0;
|
38
|
+
}
|
39
|
+
|
40
|
+
#container {
|
41
|
+
min-height: 15em;
|
42
|
+
}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - AMD example</title>
|
7
|
+
<meta name="author" content="Ramiro Rikkert">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - AMD example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" id="datepicker">
|
21
|
+
|
22
|
+
<h2>What is this?</h2>
|
23
|
+
|
24
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
25
|
+
|
26
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
27
|
+
|
28
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.js"></script>
|
29
|
+
<script>
|
30
|
+
|
31
|
+
require.config({
|
32
|
+
baseUrl: '../',
|
33
|
+
// To get timely, correct error triggers in IE, force a define/shim exports check.
|
34
|
+
enforceDefine: true
|
35
|
+
});
|
36
|
+
require(['pikaday'], function(Pikaday)
|
37
|
+
{
|
38
|
+
var picker = new Pikaday(
|
39
|
+
{
|
40
|
+
field: document.getElementById('datepicker'),
|
41
|
+
firstDay: 1,
|
42
|
+
minDate: new Date('2000-01-01'),
|
43
|
+
maxDate: new Date('2020-12-31'),
|
44
|
+
yearRange: [2000,2020]
|
45
|
+
});
|
46
|
+
});
|
47
|
+
|
48
|
+
</script>
|
49
|
+
</body>
|
50
|
+
</html>
|
@@ -0,0 +1,52 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - Container example</title>
|
7
|
+
<meta name="author" content="Stuart McFarlane">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - Container example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<div>
|
19
|
+
<div class="flow-element">
|
20
|
+
<label for="datepicker">Date:</label>
|
21
|
+
<input type="text" id="datepicker">
|
22
|
+
</div>
|
23
|
+
<div class="flow-element">
|
24
|
+
<div id="container"></div>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<h2>What is this?</h2>
|
29
|
+
|
30
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
31
|
+
|
32
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
33
|
+
|
34
|
+
|
35
|
+
<!-- First load pikaday.js and then the jQuery plugin -->
|
36
|
+
<script src="../pikaday.js"></script>
|
37
|
+
<script>
|
38
|
+
|
39
|
+
var picker = new Pikaday(
|
40
|
+
{
|
41
|
+
field: document.getElementById('datepicker'),
|
42
|
+
firstDay: 1,
|
43
|
+
minDate: new Date('2000-01-01'),
|
44
|
+
maxDate: new Date('2020-12-31'),
|
45
|
+
yearRange: [2000, 2020],
|
46
|
+
bound: true,
|
47
|
+
container: document.getElementById('container'),
|
48
|
+
});
|
49
|
+
|
50
|
+
</script>
|
51
|
+
</body>
|
52
|
+
</html>
|
@@ -0,0 +1,57 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - ranges example</title>
|
7
|
+
<meta name="author" content="Maxime Thirouin">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br />
|
20
|
+
2 months <input type="text" id="datepicker-2months">
|
21
|
+
<br />
|
22
|
+
3 months, main aligned to right <input type="text" id="datepicker-3months-right">
|
23
|
+
|
24
|
+
<h2>What is this?</h2>
|
25
|
+
|
26
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
27
|
+
|
28
|
+
<p class="small">Copyright © 2013 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/MoOx">MoOx</a></p>
|
29
|
+
|
30
|
+
|
31
|
+
<script src="../pikaday.js"></script>
|
32
|
+
<script>
|
33
|
+
|
34
|
+
var picker2months = new Pikaday(
|
35
|
+
{
|
36
|
+
numberOfMonths: 2,
|
37
|
+
field: document.getElementById('datepicker-2months'),
|
38
|
+
firstDay: 1,
|
39
|
+
minDate: new Date('2000-01-01'),
|
40
|
+
maxDate: new Date('2020-12-31'),
|
41
|
+
yearRange: [2000, 2020]
|
42
|
+
});
|
43
|
+
|
44
|
+
var picker3monthsRight = new Pikaday(
|
45
|
+
{
|
46
|
+
numberOfMonths: 3,
|
47
|
+
mainCalendar: 'right',
|
48
|
+
field: document.getElementById('datepicker-3months-right'),
|
49
|
+
firstDay: 1,
|
50
|
+
minDate: new Date('2000-01-01'),
|
51
|
+
maxDate: new Date('2020-12-31'),
|
52
|
+
yearRange: [2000, 2020]
|
53
|
+
});
|
54
|
+
|
55
|
+
</script>
|
56
|
+
</body>
|
57
|
+
</html>
|
@@ -0,0 +1,52 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - Container example</title>
|
7
|
+
<meta name="author" content="Stuart McFarlane">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - Container example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<div>
|
19
|
+
<div class="flow-element">
|
20
|
+
<label for="datepicker">Date:</label>
|
21
|
+
<input type="text" id="datepicker">
|
22
|
+
</div>
|
23
|
+
<div class="flow-element">
|
24
|
+
<div id="container"></div>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<h2>What is this?</h2>
|
29
|
+
|
30
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
31
|
+
|
32
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
33
|
+
|
34
|
+
|
35
|
+
<!-- First load pikaday.js and then the jQuery plugin -->
|
36
|
+
<script src="../pikaday.js"></script>
|
37
|
+
<script>
|
38
|
+
|
39
|
+
var picker = new Pikaday(
|
40
|
+
{
|
41
|
+
field: document.getElementById('datepicker'),
|
42
|
+
firstDay: 1,
|
43
|
+
minDate: new Date('2000-01-01'),
|
44
|
+
maxDate: new Date('2020-12-31'),
|
45
|
+
yearRange: [2000, 2020],
|
46
|
+
bound: false,
|
47
|
+
container: document.getElementById('container'),
|
48
|
+
});
|
49
|
+
|
50
|
+
</script>
|
51
|
+
</body>
|
52
|
+
</html>
|
@@ -0,0 +1,54 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - jQuery + AMD example</title>
|
7
|
+
<meta name="author" content="Ramiro Rikkert">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - jQuery + AMD example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" id="datepicker">
|
21
|
+
|
22
|
+
<h2>What is this?</h2>
|
23
|
+
|
24
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
25
|
+
|
26
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
27
|
+
|
28
|
+
|
29
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.js"></script>
|
30
|
+
<script>
|
31
|
+
|
32
|
+
require.config({
|
33
|
+
baseUrl: '../',
|
34
|
+
// To get timely, correct error triggers in IE, force a define/shim exports check.
|
35
|
+
enforceDefine: true,
|
36
|
+
paths: {
|
37
|
+
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min'
|
38
|
+
}
|
39
|
+
});
|
40
|
+
require(['jquery', 'plugins/pikaday.jquery'], function($)
|
41
|
+
{
|
42
|
+
var $datepicker = $('#datepicker').pikaday({
|
43
|
+
firstDay: 1,
|
44
|
+
minDate: new Date('2000-01-01'),
|
45
|
+
maxDate: new Date('2020-12-31'),
|
46
|
+
yearRange: [2000,2020]
|
47
|
+
});
|
48
|
+
// chain a few methods for the first datepicker, jQuery style!
|
49
|
+
$datepicker.pikaday('show').pikaday('nextMonth');
|
50
|
+
});
|
51
|
+
|
52
|
+
</script>
|
53
|
+
</body>
|
54
|
+
</html>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - jQuery example</title>
|
7
|
+
<meta name="author" content="Ramiro Rikkert">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - jQuery example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" id="datepicker">
|
21
|
+
|
22
|
+
<h2>What is this?</h2>
|
23
|
+
|
24
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
25
|
+
|
26
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
27
|
+
|
28
|
+
|
29
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
30
|
+
<!-- First load pikaday.js and then the jQuery plugin -->
|
31
|
+
<script src="../pikaday.js"></script>
|
32
|
+
<script src="../plugins/pikaday.jquery.js"></script>
|
33
|
+
<script>
|
34
|
+
|
35
|
+
var $datepicker = $('#datepicker').pikaday({
|
36
|
+
firstDay: 1,
|
37
|
+
minDate: new Date('2000-01-01'),
|
38
|
+
maxDate: new Date('2020-12-31'),
|
39
|
+
yearRange: [2000,2020]
|
40
|
+
});
|
41
|
+
// chain a few methods for the first datepicker, jQuery style!
|
42
|
+
$datepicker.pikaday('show').pikaday('nextMonth');
|
43
|
+
|
44
|
+
</script>
|
45
|
+
</body>
|
46
|
+
</html>
|
@@ -0,0 +1,53 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - moment.js example</title>
|
7
|
+
<meta name="author" content="Ramiro Rikkert">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday + moment.js</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" id="datepicker">
|
21
|
+
<div id="selected"></div>
|
22
|
+
<br>
|
23
|
+
|
24
|
+
<h2>What is this?</h2>
|
25
|
+
|
26
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
27
|
+
|
28
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
29
|
+
|
30
|
+
|
31
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
|
32
|
+
<script src="../pikaday.js"></script>
|
33
|
+
<script>
|
34
|
+
|
35
|
+
// You can get and set dates with moment objects
|
36
|
+
var picker = new Pikaday(
|
37
|
+
{
|
38
|
+
field: document.getElementById('datepicker'),
|
39
|
+
firstDay: 1,
|
40
|
+
minDate: new Date('2000-01-01'),
|
41
|
+
maxDate: new Date('2020-12-31'),
|
42
|
+
yearRange: [2000,2020],
|
43
|
+
onSelect: function() {
|
44
|
+
var date = document.createTextNode(this.getMoment().format('Do MMMM YYYY') + ' ');
|
45
|
+
document.getElementById('selected').appendChild(date);
|
46
|
+
}
|
47
|
+
});
|
48
|
+
|
49
|
+
picker.setMoment(moment().dayOfYear(366));
|
50
|
+
|
51
|
+
</script>
|
52
|
+
</body>
|
53
|
+
</html>
|
@@ -0,0 +1,106 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday alignment example</title>
|
7
|
+
<meta name="author" content="Maxime Thirouin">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday alignement example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Dates:</label>
|
19
|
+
|
20
|
+
<br />
|
21
|
+
<input type="text" id="datepicker" value="Default (bottom left)">
|
22
|
+
<br />
|
23
|
+
<input type="text" id="datepicker-topleft" value="Top left (waat?)"> <b>not really (too close from top)</b>
|
24
|
+
<br />
|
25
|
+
<input type="text" id="datepicker-topleft-forreal" value="Top left"> for real this time (same code as above)
|
26
|
+
<br />
|
27
|
+
<input type="text" id="datepicker-topright" value="Top right (waat?)"> <b>not really (too close from right)</b>
|
28
|
+
<br />
|
29
|
+
Here is the top right position with content before (no automatic adjustment used, same code as above) <input type="text" id="datepicker-topright-forreal" value="Top right">
|
30
|
+
<br />
|
31
|
+
<input type="text" id="datepicker-bottomright" value="Bottom right (waat?)">
|
32
|
+
<br />
|
33
|
+
<input type="text" id="datepicker-bottomright-forced" value="forced to position outside viewport">
|
34
|
+
<br />
|
35
|
+
Here is the bottom right position with content before (no automatic adjustment used, , same code as above) <input type="text" id="datepicker-bottomright-forreal" value="Bottom right">
|
36
|
+
|
37
|
+
<p><i>Also, take a look to the bottom right of this page to see an example with position automatically adjusted.</i></p>
|
38
|
+
<input type="text" id="datepicker-auto" style="position: absolute; bottom: 0; right: 0;" value="Automatic position">
|
39
|
+
|
40
|
+
<h2>What is this?</h2>
|
41
|
+
|
42
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
43
|
+
|
44
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/MoOx">MoOx</a></p>
|
45
|
+
|
46
|
+
|
47
|
+
<script src="../pikaday.js"></script>
|
48
|
+
<script>
|
49
|
+
|
50
|
+
// default: bottom left
|
51
|
+
new Pikaday(
|
52
|
+
{
|
53
|
+
field: document.getElementById('datepicker')
|
54
|
+
});
|
55
|
+
|
56
|
+
new Pikaday(
|
57
|
+
{
|
58
|
+
field: document.getElementById('datepicker-topleft'),
|
59
|
+
position: 'top left'
|
60
|
+
});
|
61
|
+
|
62
|
+
new Pikaday(
|
63
|
+
{
|
64
|
+
field: document.getElementById('datepicker-topleft-forreal'),
|
65
|
+
position: 'top left'
|
66
|
+
});
|
67
|
+
|
68
|
+
new Pikaday(
|
69
|
+
{
|
70
|
+
field: document.getElementById('datepicker-topright'),
|
71
|
+
position: 'top right'
|
72
|
+
});
|
73
|
+
|
74
|
+
new Pikaday(
|
75
|
+
{
|
76
|
+
field: document.getElementById('datepicker-topright-forreal'),
|
77
|
+
position: 'top right'
|
78
|
+
});
|
79
|
+
|
80
|
+
new Pikaday(
|
81
|
+
{
|
82
|
+
field: document.getElementById('datepicker-bottomright'),
|
83
|
+
position: 'bottom right'
|
84
|
+
});
|
85
|
+
|
86
|
+
new Pikaday(
|
87
|
+
{
|
88
|
+
field: document.getElementById('datepicker-bottomright-forced'),
|
89
|
+
position: 'bottom right',
|
90
|
+
reposition: false
|
91
|
+
});
|
92
|
+
|
93
|
+
new Pikaday(
|
94
|
+
{
|
95
|
+
field: document.getElementById('datepicker-bottomright-forreal'),
|
96
|
+
position: 'bottom right'
|
97
|
+
});
|
98
|
+
|
99
|
+
new Pikaday(
|
100
|
+
{
|
101
|
+
field: document.getElementById('datepicker-auto'),
|
102
|
+
});
|
103
|
+
|
104
|
+
</script>
|
105
|
+
</body>
|
106
|
+
</html>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - custom trigger element example</title>
|
7
|
+
<meta name="author" content="Ramiro Rikkert">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - custom trigger example</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" disabled id="datepicker">
|
21
|
+
<br>
|
22
|
+
<button id="datepicker-button">Choose Date</button>
|
23
|
+
|
24
|
+
|
25
|
+
<h2>What is this?</h2>
|
26
|
+
|
27
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
28
|
+
|
29
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
30
|
+
|
31
|
+
|
32
|
+
<script src="../pikaday.js"></script>
|
33
|
+
<script>
|
34
|
+
|
35
|
+
new Pikaday(
|
36
|
+
{
|
37
|
+
field: document.getElementById('datepicker'),
|
38
|
+
trigger: document.getElementById('datepicker-button'),
|
39
|
+
minDate: new Date('2000-01-01'),
|
40
|
+
maxDate: new Date('2020-12-31'),
|
41
|
+
yearRange: [2010,2020]
|
42
|
+
});
|
43
|
+
|
44
|
+
</script>
|
45
|
+
</body>
|
46
|
+
</html>
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday - weeknumbers example</title>
|
7
|
+
<meta name="author" content="Maxime Thirouin">
|
8
|
+
<link rel="stylesheet" href="../css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="../css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
13
|
+
|
14
|
+
<h1>Pikaday - showing weeknumbers</h1>
|
15
|
+
|
16
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<input type="text" id="datepicker-week-numbers">
|
20
|
+
|
21
|
+
<h2>What is this?</h2>
|
22
|
+
|
23
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
24
|
+
|
25
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license | Example by <a href="https://github.com/rikkert">Ramiro Rikkert</a></p>
|
26
|
+
|
27
|
+
<script src="../pikaday.js"></script>
|
28
|
+
<script>
|
29
|
+
|
30
|
+
var pickerWeekNums = new Pikaday({
|
31
|
+
showWeekNumber: true,
|
32
|
+
field: document.getElementById('datepicker-week-numbers'),
|
33
|
+
firstDay: 1,
|
34
|
+
minDate: new Date('2000-01-01'),
|
35
|
+
maxDate: new Date('2020-12-31'),
|
36
|
+
yearRange: [2000, 2020]
|
37
|
+
});
|
38
|
+
|
39
|
+
</script>
|
40
|
+
</body>
|
41
|
+
</html>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
6
|
+
<title>Pikaday</title>
|
7
|
+
<meta name="author" content="David Bushell">
|
8
|
+
<link rel="stylesheet" href="css/pikaday.css">
|
9
|
+
<link rel="stylesheet" href="css/site.css">
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<h1>Pikaday</h1>
|
13
|
+
|
14
|
+
<p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
|
15
|
+
|
16
|
+
<p><a href="https://github.com/dbushell/Pikaday"><strong>Pikaday source on GitHub</strong></a></p>
|
17
|
+
|
18
|
+
<label for="datepicker">Date:</label>
|
19
|
+
<br>
|
20
|
+
<input type="text" id="datepicker">
|
21
|
+
|
22
|
+
<h2>What is this?</h2>
|
23
|
+
|
24
|
+
<p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
|
25
|
+
|
26
|
+
<p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license</p>
|
27
|
+
|
28
|
+
|
29
|
+
<script src="pikaday.js"></script>
|
30
|
+
<script>
|
31
|
+
|
32
|
+
var picker = new Pikaday(
|
33
|
+
{
|
34
|
+
field: document.getElementById('datepicker'),
|
35
|
+
firstDay: 1,
|
36
|
+
minDate: new Date('2000-01-01'),
|
37
|
+
maxDate: new Date('2020-12-31'),
|
38
|
+
yearRange: [2000,2020]
|
39
|
+
});
|
40
|
+
|
41
|
+
</script>
|
42
|
+
</body>
|
43
|
+
</html>
|