Skip to content

Commit e8fa81e

Browse files
committed
Added support to manipulate with DatePickerX using keyboard only
1 parent 10598d1 commit e8fa81e

File tree

13 files changed

+675
-394
lines changed

13 files changed

+675
-394
lines changed

AUTHORS.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Alexander Krupko <alex@avrora.team>
1+
Alexander Krupko <alex[email protected]>

Gruntfile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ module.exports = function (grunt)
99
* DatePickerX\n\
1010
*\n\
1111
* Cool light visual date picker on pure JavaScript\n\
12-
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+, iOS Safari 8+, Android Browser 4.4+\n\
12+
* Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE 11+, Edge 15+, iOS Safari, Android Google Chrome\n\
1313
*\n\
14-
* @author Alexander Krupko <[email protected]>\n\
14+
* @author Alexander Krupko <[email protected]>\n\
1515
* @copyright 2016 Alexander Krupko\n\
1616
* @license MIT\n\
1717
* @version ' + grunt.file.readJSON('package.json').version + '\n\

LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2016 Avrora Team
3+
Copyright (c) 2016 Alexander Krupko
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# DatePickerX
22
Cool light visual date picker using native JavaScript
33

4-
Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+ (since 1.0.1 version), iOS Safari 8+, Android Browser 4.4+
4+
Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE 11+, Edge 15+, iOS Safari, Android Google Chrome
55

66
### How to install
77
You need to include library javascript and CSS files from `dist` directory on your page
@@ -13,7 +13,7 @@ You need to include library javascript and CSS files from `dist` directory on yo
1313
### How to use
1414
The DatePickerX extends HTMLInputElement objects through prototypes. It adds DatePickerX object for each input element.
1515

16-
You need just select HTML element and execute init method for date picker initializing.
16+
You need just select HTML element and execute the `init` method for the date picker initializing.
1717

1818
```javascript
1919
document.getElementById('myInputId').DatePickerX.init();
@@ -33,6 +33,7 @@ Also DatePickerX provides global `DatePickerX` object with following methods:
3333

3434
### DatePickerX options
3535
* `mondayFirst` - if `true`, set Monday as start week day. Default: `true`
36+
3637
* `format` - date format. It's being used for formatting input values and returned values from `getValue` methods. Default: `yyyy/mm/dd`. Supports following literals:
3738
* `d` - day of the month without leading zeros (1-31)
3839
* `dd` - day of the month with leading zeros (01-31)
@@ -43,15 +44,35 @@ Also DatePickerX provides global `DatePickerX` object with following methods:
4344
* `MM` - full textual representation of a month. See `singleMonthLabels` option
4445
* `yy` - two-digits representation of a year
4546
* `yyyy` - four-digits representation of a year
46-
* `minDate` - minimum date limit. Should be a `Date` object or `null` (no limit). Also you may pass another DatePickerX HTML input which selected date will be set as min date dynamically
47-
* `maxDate` - maximum date limit. Should be a `Date` object. Also you may pass another DatePickerX HTML input which selected date will be set as min date dynamically
47+
48+
* `minDate` - minimum date limit. Should be one of the following types:
49+
* `null` - no limits. Default value
50+
* the `Date` object or any valid string for the `Date()` object constructor
51+
* another DatePickerX HTML input element which selected date will be set as min date dynamically
52+
* callback function that should return the `Date` object or any valid string for the `Date()` object constructor
53+
54+
* `maxDate` - maximum date limit. Should be one of the following types:
55+
* `null` - no limits. Default value
56+
* the `Date` object or any valid string for the `Date()` object constructor
57+
* another DatePickerX HTML input element which selected date will be set as max date dynamically
58+
* callback function that should return the `Date` object or any valid string for the `Date()` object constructor
59+
4860
* `weekDayLabels` - array with textual representation of week days starting with Monday. See `D` literal for `format` option. Default: `['Mo', 'Tu', 'We', 'Th', 'Fr', 'St', 'Su']`
49-
* `shortMonthLabels` - array with textual representation of short month names. See `M` literal for `format` option. Default: `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`
50-
* `singleMonthLabels`: array with textual representation of full month names. See `MM` literal for `format` option. Default: `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`
61+
62+
* `shortMonthLabels` - array with textual representation of short month names. See `M` literal for `format` option. Default: `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`
63+
64+
* `singleMonthLabels`: array with textual representation of full month names. See `MM` literal for `format` option. Default: `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`
65+
5166
* `todayButton` - if `true` today button should be enabled. Current date will be set as date picker value by clicking this button. Default: `true`
67+
5268
* `todayButtonLabel` - today button label. Default: `'Today'`
69+
5370
* `clearButton` - if `true` clear button should be enabled. Date picker value will be cleared by clicking this button. Default: `true`
71+
5472
* `clearButtonLabel` - clear button label. Default: `'Clear'`
55-
* `titleFormatDay` - Title format for day value items. All literals from the `format` property can be used. Default: `'MM dd, yyyy'`
56-
* `titleFormatMonth` - Title format for month value items. All literals from the `format` property can be used. Default: `'MM yyyy'`
73+
74+
* `titleFormatDay` - Title format for day value items. All literals from the `format` property can be used. Default: `'MM dd, yyyy'`
75+
76+
* `titleFormatMonth` - Title format for month value items. All literals from the `format` property can be used. Default: `'MM yyyy'`
77+
5778
* `titleFormatYear` - Title format for year value items. All literals from the `format` property can be used. Default: `'yyyy'`

demo/index.html

Lines changed: 11 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,19 @@
1313

1414
$min.DatePickerX.init({
1515
mondayFirst: true,
16-
minDate : new Date(2017, 8, 13),
16+
minDate : new Date(2021, 5, 9),
1717
maxDate : $max
1818
});
1919

2020
$max.DatePickerX.init({
2121
mondayFirst: true,
2222
minDate : $min,
23-
//maxDate : new Date(2017, 4, 25)
23+
maxDate : function()
24+
{
25+
var date = new Date();
26+
return new Date().setDate(date.getDate() + 10);
27+
},
28+
clearButton: false
2429
});
2530

2631
});
@@ -42,147 +47,15 @@
4247
</head>
4348
<body>
4449

45-
<label class="real">
46-
<input type="text" name="realDPX-min" placeholder="Choice start date">
47-
</label>
50+
<div>
51+
<label class="real">
52+
<input type="text" name="realDPX-min" placeholder="Choice start date">
53+
</label>
4854

49-
<div style="margin-top: 80vh;">
5055
<label class="real">
5156
<input type="text" name="realDPX-max" placeholder="Choice end date">
5257
</label>
5358
</div>
5459

55-
56-
<label class="date-picker-x-container">
57-
<input type="text" name="dp">
58-
<div class="date-picker-x active" data-dpx-type="day">
59-
<div class="dpx-title-box">
60-
<span class="dpx-prev" title="March 2016">&#x276e;</span>
61-
<span class="dpx-title" title="2016">April 2016</span>
62-
<span class="dpx-next" title="May 2016">&#x276f;</span>
63-
</div>
64-
<div class="dpx-content-box">
65-
<span class="dpx-item dpx-weekday">Mo</span>
66-
<span class="dpx-item dpx-weekday">Tu</span>
67-
<span class="dpx-item dpx-weekday">We</span>
68-
<span class="dpx-item dpx-weekday">Th</span>
69-
<span class="dpx-item dpx-weekday">Fr</span>
70-
<span class="dpx-item dpx-weekday dpx-weekend">St</span>
71-
<span class="dpx-item dpx-weekday dpx-weekend">Su</span>
72-
<span class="dpx-item dpx-out" title="March 28, 2016">28</span>
73-
<span class="dpx-item dpx-out" title="March 29, 2016">29</span>
74-
<span class="dpx-item dpx-out" title="">30</span>
75-
<span class="dpx-item dpx-out" title="">31</span>
76-
<span class="dpx-item" title="">1</span>
77-
<span class="dpx-item dpx-weekend" title="">2</span>
78-
<span class="dpx-item dpx-weekend" title="">3</span>
79-
<span class="dpx-item" title="">4</span>
80-
<span class="dpx-item" title="">5</span>
81-
<span class="dpx-item" title="">6</span>
82-
<span class="dpx-item" title="">7</span>
83-
<span class="dpx-item" title="">8</span>
84-
<span class="dpx-item dpx-weekend" title="">9</span>
85-
<span class="dpx-item dpx-weekend" title="">10</span>
86-
<span class="dpx-item" title="">11</span>
87-
<span class="dpx-item" title="">12</span>
88-
<span class="dpx-item dpx-selected" title="">13</span>
89-
<span class="dpx-item" title="">14</span>
90-
<span class="dpx-item" title="">15</span>
91-
<span class="dpx-item dpx-weekend dpx-current" title="">16</span>
92-
<span class="dpx-item dpx-weekend" title="">17</span>
93-
<span class="dpx-item" title="">18</span>
94-
<span class="dpx-item" title="">19</span>
95-
<span class="dpx-item" title="">20</span>
96-
<span class="dpx-item dpx-disabled" title="">21</span>
97-
<span class="dpx-item dpx-disabled" title="">22</span>
98-
<span class="dpx-item dpx-weekend dpx-disabled" title="">23</span>
99-
<span class="dpx-item dpx-weekend dpx-disabled" title="">24</span>
100-
<span class="dpx-item dpx-disabled" title="">25</span>
101-
<span class="dpx-item dpx-disabled" title="">26</span>
102-
<span class="dpx-item dpx-disabled" title="">27</span>
103-
<span class="dpx-item dpx-disabled" title="">28</span>
104-
<span class="dpx-item dpx-disabled" title="">29</span>
105-
<span class="dpx-item dpx-weekend dpx-disabled" title="">30</span>
106-
<span class="dpx-item dpx-weekend dpx-out dpx-disabled" title="">1</span>
107-
<span class="dpx-item dpx-disabled dpx-out" title="">2</span>
108-
<span class="dpx-item dpx-disabled dpx-out" title="">3</span>
109-
<span class="dpx-item dpx-disabled dpx-out" title="">4</span>
110-
<span class="dpx-item dpx-disabled dpx-out" title="">5</span>
111-
<span class="dpx-item dpx-disabled dpx-out" title="">6</span>
112-
<span class="dpx-item dpx-disabled dpx-out dpx-weekend" title="">7</span>
113-
<span class="dpx-item dpx-disabled dpx-out dpx-weekend" title="">8</span>
114-
</div>
115-
<div class="dpx-btns">
116-
<span class="dpx-item dpx-today">Today</span>
117-
<span class="dpx-item dpx-clear">Clear</span>
118-
</div>
119-
</div>
120-
</label>
121-
122-
<label class="date-picker-x-container">
123-
<input type="text" name="dp">
124-
<div class="date-picker-x active" data-dpx-type="month">
125-
<div class="dpx-title-box">
126-
<span class="dpx-prev" title="2015">&#x276e;</span>
127-
<span class="dpx-title" title="2010 - 2019">2016</span>
128-
<span class="dpx-next" title="2017">&#x276f;</span>
129-
</div>
130-
<div class="dpx-content-box">
131-
<span class="dpx-item dpx-out" title="November 2015">Nov</span>
132-
<span class="dpx-item dpx-out" title="December 1015">Dec</span>
133-
<span class="dpx-item" title="January">Jan</span>
134-
<span class="dpx-item" title="">Feb</span>
135-
<span class="dpx-item" title="">Mar</span>
136-
<span class="dpx-item dpx-current" title="">Apr</span>
137-
<span class="dpx-item" title="">May</span>
138-
<span class="dpx-item dpx-selected" title="">Jun</span>
139-
<span class="dpx-item" title="">Jul</span>
140-
<span class="dpx-item" title="">Aug</span>
141-
<span class="dpx-item" title="">Sep</span>
142-
<span class="dpx-item dpx-disabled" title="">Oct</span>
143-
<span class="dpx-item dpx-disabled" title="">Nov</span>
144-
<span class="dpx-item dpx-disabled" title="">Dec</span>
145-
<span class="dpx-item dpx-out dpx-disabled" title="">Jan</span>
146-
<span class="dpx-item dpx-out dpx-disabled" title="">Feb</span>
147-
</div>
148-
<div class="dpx-btns">
149-
<span class="dpx-item dpx-clear">Clear</span>
150-
</div>
151-
</div>
152-
</label>
153-
154-
<label class="date-picker-x-container">
155-
<input type="text" name="dp">
156-
<div class="date-picker-x active" data-dpx-type="year">
157-
<div class="dpx-title-box">
158-
<span class="dpx-prev" title="2000 - 2009">&#x276e;</span>
159-
<span class="dpx-title">2010 - 2019</span>
160-
<span class="dpx-next dpx-disabled" title="2020 - 2029">&#x276f;</span>
161-
</div>
162-
<div class="dpx-content-box">
163-
<span class="dpx-item dpx-out" title="2007">2007</span>
164-
<span class="dpx-item dpx-out" title="2008">2008</span>
165-
<span class="dpx-item dpx-out" title="2009">2009</span>
166-
<span class="dpx-item" title="2010">2010</span>
167-
<span class="dpx-item" title="2011">2011</span>
168-
<span class="dpx-item" title="2012">2012</span>
169-
<span class="dpx-item" title="2013">2013</span>
170-
<span class="dpx-item" title="2014">2014</span>
171-
<span class="dpx-item" title="2015">2015</span>
172-
<span class="dpx-item dpx-current dpx-selected" title="2016">2016</span>
173-
<span class="dpx-item" title="2017">2017</span>
174-
<span class="dpx-item" title="2018">2018</span>
175-
<span class="dpx-item dpx-disabled" title="2019">2019</span>
176-
<span class="dpx-item dpx-out dpx-disabled" title="2020">2020</span>
177-
<span class="dpx-item dpx-out dpx-disabled" title="2021">2021</span>
178-
<span class="dpx-item dpx-out dpx-disabled" title="2022">2022</span>
179-
</div>
180-
<div class="dpx-btns">
181-
<span class="dpx-item dpx-today">Today</span>
182-
</div>
183-
</div>
184-
</label>
185-
186-
18760
</body>
18861
</html>

0 commit comments

Comments
 (0)