kea-rails 2.0.0.pre.alpha5 → 2.0.0.pre.alpha6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>
|