├── .gitignore
├── package.json
├── demos
├── inputs.html
├── triggers.html
├── auto.html
├── range.html
├── index.md
└── index.html
├── LICENSE
├── src
├── dzdatetimepicker.js
├── rangepicker.js
├── autohook.js
├── dzdatetimepicker.less
├── timepicker.js
└── datepicker.js
├── dist
├── dzdatetimepicker.css.map
├── dzdatetimepicker.css
├── dzdatetimepicker-dist.js.map
└── dzdatetimepicker-dist.js
├── README.md
├── prepros-6.config
├── .eslintrc
└── prepros.config
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | README.html
3 | node_modules
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dzdatetimepicker",
3 | "version": "1.6.6",
4 | "description": "Functional, Extensible & Simple DateTime picker without any dependencies.",
5 | "main": "src/dzdatetimepicker.js",
6 | "dependencies": {},
7 | "devDependencies": {},
8 | "scripts": {
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/DZNS/DZDateTimePicker.git"
14 | },
15 | "keywords": [
16 | "picker",
17 | "date",
18 | "time",
19 | "html",
20 | "javascript",
21 | "fallback",
22 | "support",
23 | "es6"
24 | ],
25 | "author": "Nikhil Nigade (Dezine Zync Studios LLP.)",
26 | "license": "MIT",
27 | "bugs": {
28 | "url": "https://github.com/DZNS/DZDateTimePicker/issues"
29 | },
30 | "homepage": "https://github.com/DZNS/DZDateTimePicker#readme"
31 | }
32 |
--------------------------------------------------------------------------------
/demos/inputs.html:
--------------------------------------------------------------------------------
1 |
22 |
24 |
25 |
30 |
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Dezine Zync Studios
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/demos/triggers.html:
--------------------------------------------------------------------------------
1 |
36 |
38 |
39 |
40 |
Date Trigger
41 |
42 |
43 |
Time Trigger
44 |
45 |
Trigger
21 | ```
22 |
23 | The few important things to note are:
24 | - when `dzdatetimepicker.js` runs, it automatically finds elements with the class `date-trigger` and hooks on to them. No futher configuration is required.
25 | - You can set additional, *optional* dataset items like `date-max` and `date-min` to control the selectable items within a range. Both are optional, and you can use only one if desired.
26 | - the last parameter, `onset` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
27 |
28 | ### Timer Picker Usage
29 | You can initiate the time picker by wiring up a *trigger* element like so:
30 | ```html
31 | Time Trigger
32 | ```
33 | When the script loads, it automatically hooks on to elements with the class `timer-trigger`. No other configuration is necessary. Similar to the date picker, the last parameter, `onchange` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
34 |
35 | The callback, unlike the date picker, responds with an object in the following format:
36 | ```json
37 | {
38 | "string" : "14:26",
39 | "hours" : 14,
40 | "minutes" : 26
41 | }
42 | ```
43 |
44 | ### Notes
45 | - Both the datepicker and timepicker automatically idenity `index.md
5 |
6 |
7 | DZDateTimePicker
8 | Functional, Extensible & Simple Date-picker without any dependencies..
9 | Demo: http://codepen.io/dezinezync/pen/jqvZYp
10 | Setup
11 | <!-- For Dev -->
12 | <script src="dzdatetimepicker.js"></script>
13 | <!-- For Production -->
14 | <script src="dzdtp.min.js"></script>
15 |
16 | <!-- The stylesheet. You can include your own instead -->
17 | <link rel="stylesheet" href="dzdatetimepicker.css" />
18 | Date Picker Usage
20 | You can initiate the date picker by wiring up a trigger element like so:
21 | <button class="date-trigger" data-date-max="2016-05-09" data-date-min="2016-01-01" data-onset="didSetDate">Trigger</button>
22 | The few important things to note are:
24 |
25 | when dzdatetimepicker.js runs, it automatically finds elements with the class date-trigger and hooks on to them. No futher configuration is required.
26 | You can set additional, optional dataset items like date-max and date-min to control the selectable items within a range. Both are optional, and you can use only one if desired.
27 | the last parameter, onset is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
28 |
29 | Timer Picker Usage
30 | You can initiate the time picker by wiring up a trigger element like so:
31 | <div role="button" class="trigger timer-trigger" data-onchange="didSetTime">Time Trigger</div>
32 | When the script loads, it automatically hooks on to elements with the class timer-trigger. No other configuration is necessary. Similar to the date picker, the last parameter, onchange is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
34 | The callback, unlike the date picker, responds with an object in the following format:
35 | {
36 | "string" : "14:26",
37 | "hours" : 14,
38 | "minutes" : 26
39 | }
40 | Notes
42 |
43 | Both the datepicker and timepicker automatically idenity <input> elements. They hook on to the focus and blur events so the user can use the pickers to set the values directly.
44 | If the pickers detect an <input> element, the pickers will update the value attribute when the user updates their selection.
45 | When not using an <input> element, you can optionally set the attribute data-date-val="" and it'll be updated similarly.
46 |
47 | Todo
48 |
49 | [x] Remove dependencies
50 |
51 | License
52 | DZDateTimePicker is licensed under the MIT License. Please refer to the LICENSE file for more information.
53 | Author
54 | Nikhil Nigade (Dezine Zync Studios)
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/autohook.js:
--------------------------------------------------------------------------------
1 | ((glob) => {
2 |
3 | if (!glob)
4 | return; // exit early as we only wish to target the browser environment
5 |
6 | /*
7 | * we check early if the browser natively supports
8 | * input[type="date"],
9 | * input[type="time"],
10 | * input[type="datetime-local"]
11 | */
12 |
13 | let checks = {
14 | 'date': false,
15 | 'time': false,
16 | 'datetime-local': false
17 | }
18 |
19 | let input = document.createElement("input")
20 |
21 | Object.keys(checks).forEach(key => {
22 | input.type = key
23 | // if the input type is the same as we set it, it is supported by the browser
24 | checks[key] = input.type === key
25 | })
26 |
27 | const DATE_TIME_EXP = /([\d]{4}\-[\d]{2}\-[\d]{2})T([\d]{2}\:[\d]{2})/
28 |
29 | const hookTime = () => {
30 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="time"]'))
31 | inputs.forEach(attachTimeTrigger)
32 | }
33 |
34 | const hookDate = () => {
35 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="date"]'))
36 | inputs.forEach(attachDateTrigger)
37 | }
38 |
39 | const hookDateTime = () => {
40 | /*
41 | * when datetime-local is not supported,
42 | * we split the current input into two separate inputs.
43 | * One for date, the other for time.
44 | * We set the original input elem to "hidden" and manipulate
45 | * it's value so the user still retains the name of that field in the form
46 | */
47 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="datetime-local"]'))
48 | inputs.forEach(elem => {
49 |
50 | // create a reference for the parent node because we need it later
51 | const input = elem
52 | const container = input.parentNode
53 | const getTarget = () => container.querySelector("input[data-original='datetime-local']")
54 |
55 | let value = input.value,
56 | hasValue = value.trim().length > 0,
57 | date = null,
58 | time = null
59 |
60 | if (hasValue && DATE_TIME_EXP.test(value)) {
61 | date = value.replace(DATE_TIME_EXP, "$1")
62 | time = value.replace(DATE_TIME_EXP, "$2")
63 | }
64 |
65 | const dateChange = evt => {
66 | let target = getTarget()
67 | target.dataset.date = evt.target.value
68 | }
69 |
70 | const timeChange = evt => {
71 | let target = getTarget()
72 | target.dataset.time = evt.target.value
73 | }
74 |
75 | // define a custom getter for value which utilizes the above two dataset values
76 | input.__defineGetter__("value", function() {
77 | return ((this.dataset.date||"" )+ " " + (this.dataset.time||"")).trim()
78 | })
79 |
80 | // set the type to hidden so it's still in the DOM, but not visible to the user
81 | input.type = "hidden"
82 | // set this custom dataset prop so we can query for it later
83 | input.dataset.original = "datetime-local"
84 |
85 | // create our new date input
86 | let inDate = document.createElement("input")
87 | inDate.type = checks.date ? "date" : "text"
88 | inDate.placeholder = "Date"
89 | inDate.oninput = dateChange;
90 |
91 | if (date)
92 | inDate.value = date
93 |
94 | // check if date-min and date-max are set
95 | let {dateMin, dateMax} = input.dataset
96 | if (dateMin)
97 | inDate.dataset.dateMin = dateMin
98 | if (dateMax)
99 | inDate.dataset.dateMax = dateMax
100 |
101 | // create our new time input
102 | let inTime = document.createElement("input")
103 | inTime.type = checks.time ? "time" : "text"
104 | inTime.placeholder = "Time"
105 | inTime.oninput = timeChange;
106 |
107 | if (time)
108 | inTime.value = time;
109 |
110 | [inDate, inTime].forEach(inp => {
111 | inp.__defineGetter__("required", function() {
112 | return input.required
113 | })
114 |
115 | inp.__defineGetter__("validity", function() {
116 | return input.validity
117 | })
118 |
119 | inp.__defineGetter__("pattern", function() {
120 | return input.pattern
121 | })
122 |
123 | inp.__defineGetter__("validationMessage", function() {
124 | return input.validationMessage
125 | })
126 |
127 | inp.__defineSetter__("validationMessage", function(val) {
128 | input.validationMessage = val
129 | })
130 | })
131 |
132 | // add them to the DOM after the OG
133 | container.insertAdjacentElement("beforeEnd", inDate)
134 | container.insertAdjacentElement("beforeEnd", inTime)
135 |
136 | // attach the triggers
137 | attachDateTrigger(inDate)
138 | attachTimeTrigger(inTime)
139 | })
140 | }
141 |
142 | if (!checks.date)
143 | hookDate()
144 | if (!checks.time)
145 | hookTime()
146 | if (!checks['datetime-local'])
147 | hookDateTime()
148 |
149 | // expose functions to the window
150 | glob.hookDate = hookDate;
151 | glob.hookTime = hookTime;
152 | glob.hookDateTimer = hookDateTime;
153 |
154 | })(typeof module === "undefined" ? window : undefined);
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DZDateTimePicker
2 | Functional, Extensible & Simple Date and Time picker without any dependencies.
3 |
4 | DZDateTimePicker also automatically adds support for:
5 | ```html
6 | input[type="date"]
7 | input[type="time"]
8 | input[type="datetime-local"]
9 | ```
10 | if they are not supported natively. You don't have to do anything extra. The library will handle the setup for you. You simply have to query the `.value` of your original input elements and you're all set.
11 |
12 | ### Demos
13 | The related demos are in the `demo` folder of this repo.
14 | On a related note:
15 | - All source files are in the `src` directory.
16 | - All distribution files are in the `dist` directory (which you should use for production sites)
17 |
18 | ### Setup
19 | Via NPM
20 | ```sh
21 | npm install --save dzdatetimepicker
22 | ```
23 |
24 | ```html
25 |
26 |
27 |
28 | Trigger
47 | ```
48 |
49 | The few important things to note are:
50 | - when `dzdatetimepicker-dsit.js` runs, it automatically finds elements with the class `date-trigger` and hooks on to them. No futher configuration is required.
51 | - You can set additional, *optional* dataset items like `date-max` and `date-min` to control the selectable items within a range. Both are optional, and you can use only one if desired.
52 | - the last parameter, `onset` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
53 |
54 | ### Timer Picker Usage
55 | Simply,
56 | ```html
57 | Time Trigger
67 | ```
68 | When the script loads, it automatically hooks on to elements with the class `timer-trigger`. No other configuration is necessary. Similar to the date picker, the last parameter, `onchange` is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
69 |
70 | The callback, unlike the date picker, responds with an object in the following format:
71 | ```json
72 | {
73 | "string" : "14:26",
74 | "hours" : 14,
75 | "minutes" : 26
76 | }
77 | ```
78 |
79 | ### Range Picker Usage
80 | To setup a range picker, include the `rangepicker-dist.js` file along with the date-picker sources as mentioned above. Then you can can write simple markup as follows:
81 | ```html
82 |
83 |
84 |
Start
91 |
92 |
End
99 |
100 |
224 | `
225 |
226 | // draw hours dropdown
227 | let hours = Array.from(Array(13).keys())
228 | hours.shift()
229 | markup += hours
230 | .map((item) => {
231 | if(item === hoursVal)
232 | return `${item} `
233 | return `${item} `
234 | }).join(' ')
235 |
236 | markup += `
237 | `
238 |
239 | // draw minutes dropdown
240 | markup += Array.from(Array(60).keys())
241 | .map((item) => {
242 | if(item.toString().length === 1)
243 | item = '0' + item
244 | if(item.toString() === minVal)
245 | return `${item} `
246 | return `${item} `
247 | }).join(' ')
248 |
249 | // AM, PM
250 | markup += `
251 |
252 | AM
253 | PM
254 | `
255 |
256 | markup +=`
257 |
`
258 |
259 | return markup
260 | }
261 |
262 | cleanupTimer(evt, timer) {
263 | if(evt && evt.preventDefault)
264 | evt.preventDefault()
265 |
266 | if(timer) {
267 |
268 | mutate(() => {
269 | timer.classList.remove('active')
270 | })
271 | .then(() => wait(500))
272 | .then(() => {
273 | this.source = undefined
274 | if(timer.parentNode)
275 | document.body.removeChild(timer)
276 | })
277 | .catch(err => {
278 | console.error(err)
279 | })
280 |
281 | }
282 |
283 | document.body.removeEventListener('click', this.bodyClick, false)
284 | document.body.removeEventListener('keydown', this.bodyInput, false)
285 |
286 | return false
287 | }
288 |
289 | }
290 |
291 | if(glob && glob.exports) {
292 | glob.exports = Object.assign({}, {
293 | 'TimePicker': TimePicker,
294 | 'timePicker': new TimePicker()
295 | })
296 | }
297 | else {
298 | glob.TimePicker = TimePicker
299 | glob.timePicker = new TimePicker()
300 | }
301 |
302 | })(typeof module === "undefined" ? window : module);
303 |
--------------------------------------------------------------------------------
/prepros-6.config:
--------------------------------------------------------------------------------
1 | {
2 | "name": "DZDateTimePicker",
3 | "firstRun": false,
4 | "exportConfig": true,
5 | "fileConfigs": [
6 | {
7 | "path": "dzdatetimepicker.css",
8 | "configJson": "{\"autoCompile\":false,\"forceCompile\":false,\"customOutput\":\"\",\"sourceMap\":false,\"compiler-autoprefixer\":{\"enabled\":false},\"compiler-cssnext\":{\"enabled\":false},\"compiler-minify-css\":{\"enabled\":false},\"outputSuffix\":\"-dist\"}"
9 | },
10 | {
11 | "path": "dzdatetimepicker.js",
12 | "configJson": "{\"autoCompile\":true,\"forceCompile\":false,\"customOutput\":\"\",\"sourceMap\":true,\"compiler-concat-js\":{\"enabled\":true},\"compiler-babel\":{\"enabled\":false},\"compiler-uglify-js\":{\"enabled\":false,\"mangle\":false},\"outputSuffix\":\"-dist\"}"
13 | },
14 | {
15 | "path": "dzdtp.min.js",
16 | "configJson": "{\"autoCompile\":false,\"forceCompile\":false,\"customOutput\":\"\",\"sourceMap\":false,\"compiler-concat-js\":{\"enabled\":false},\"compiler-babel\":{\"enabled\":false},\"compiler-uglify-js\":{\"enabled\":false,\"mangle\":false},\"outputSuffix\":\"-dist\"}"
17 | },
18 | {
19 | "path": "rangepicker.js",
20 | "configJson": "{\"autoCompile\":true,\"forceCompile\":false,\"customOutput\":\"\",\"sourceMap\":true,\"compiler-concat-js\":{\"enabled\":true},\"compiler-babel\":{\"enabled\":false},\"compiler-uglify-js\":{\"enabled\":false,\"mangle\":false},\"outputSuffix\":\"-dist\"}"
21 | },
22 | {
23 | "path": "src/dzdatetimepicker.js",
24 | "configJson": "{\"autoCompile\":true,\"forceCompile\":false,\"customOutput\":\"dist/dzdatetimepicker-dist.js\",\"sourceMap\":true,\"compiler-concat-js\":{\"enabled\":true},\"compiler-babel\":{\"enabled\":false},\"compiler-uglify-js\":{\"enabled\":false,\"mangle\":false},\"outputSuffix\":\"-dist\"}"
25 | },
26 | {
27 | "path": "src/dzdatetimepicker.less",
28 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"dist/dzdatetimepicker.css\",\"autoCompile\":true,\"sourceMap\":true,\"compiler-less\":{\"enabled\":true},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":true}}"
29 | }
30 | ],
31 | "fileTree": {
32 | "expandedDirs": [
33 | "src"
34 | ],
35 | "hideSystemFiles": true,
36 | "systemFiles": [
37 | ".*",
38 | "desktop.ini",
39 | "prepros.config",
40 | "$RECYCLE.BIN",
41 | "prepros.cfg",
42 | "prepros-6.config",
43 | "Prepros Export"
44 | ],
45 | "hideUnwatchedFiles": false
46 | },
47 | "imports": [
48 | {
49 | "path": "src/dzdatetimepicker.js",
50 | "imports": [
51 | "src/datepicker.js",
52 | "src/timepicker.js",
53 | "src/rangepicker.js",
54 | "src/autohook.js"
55 | ]
56 | }
57 | ],
58 | "projectView": {
59 | "selectedView": "file-tree"
60 | },
61 | "fileWatcher": {
62 | "enabled": true,
63 | "watchedExtensions": [
64 | "less",
65 | "sass",
66 | "scss",
67 | "styl",
68 | "md",
69 | "markdown",
70 | "coffee",
71 | "js",
72 | "jade",
73 | "haml",
74 | "slim",
75 | "ls",
76 | "html",
77 | "htm",
78 | "css",
79 | "rb",
80 | "php",
81 | "asp",
82 | "aspx",
83 | "cfm",
84 | "chm",
85 | "cms",
86 | "do",
87 | "erb",
88 | "jsp",
89 | "mhtml",
90 | "mspx",
91 | "pl",
92 | "py",
93 | "shtml",
94 | "cshtml",
95 | "cs",
96 | "vb",
97 | "vbs",
98 | "tpl",
99 | "ctp",
100 | "kit",
101 | "png",
102 | "jpg",
103 | "jpeg",
104 | "json",
105 | "ts",
106 | "pug"
107 | ]
108 | },
109 | "pathFilters": [
110 | "node_modules",
111 | ".*",
112 | "bower_components",
113 | "prepros.config",
114 | "Prepros Export",
115 | "prepros-6.config",
116 | "prepros.cfg",
117 | "wp-admin",
118 | "wp-includes"
119 | ],
120 | "server": {
121 | "port": 7879,
122 | "assignNewPortAutomatically": false,
123 | "enable": true,
124 | "proxy": {
125 | "enable": false,
126 | "url": ""
127 | }
128 | },
129 | "browser-sync": {
130 | "enable": false,
131 | "clicks": true,
132 | "forms": true,
133 | "scroll": true
134 | },
135 | "live-reload": {
136 | "enable": true,
137 | "animate": true,
138 | "delay": 0
139 | },
140 | "ftp-deploy": {
141 | "connectionType": "ftp",
142 | "remotePath": "",
143 | "uploadTimeout": 20000,
144 | "uploadOnChange": false,
145 | "ftp": {
146 | "secure": false,
147 | "keepAlive": true,
148 | "host": "",
149 | "port": 21,
150 | "user": "",
151 | "password": ""
152 | },
153 | "sftp": {
154 | "host": "",
155 | "port": 22,
156 | "usePrivateKey": false,
157 | "username": "",
158 | "password": "",
159 | "privateKey": "",
160 | "passphrase": ""
161 | },
162 | "pathFilters": [
163 | "config.rb",
164 | "prepros.config",
165 | "prepros-6.config",
166 | "node_modules",
167 | "Prepros Export",
168 | ".git",
169 | ".idea",
170 | ".sass-cache",
171 | ".hg",
172 | ".svn",
173 | ".cache",
174 | ".DS_Store",
175 | "*.sass",
176 | "*.scss",
177 | "*.less",
178 | "*.pug",
179 | "*.jade",
180 | "*.styl",
181 | "*.haml",
182 | "*.slim",
183 | "*.coffee",
184 | "*.ls",
185 | "*.kit",
186 | "*.ts"
187 | ],
188 | "history": []
189 | },
190 | "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
191 | "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
192 | "autoprefixer": {
193 | "browsers": "last 5 versions"
194 | },
195 | "file-type-pug": "{\"compilers\":[\"pug\"]}",
196 | "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
197 | "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
198 | "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
199 | "file-type-markdown": "{\"compilers\":[\"markdown\"]}",
200 | "file-type-haml": "{\"compilers\":[\"haml\"]}",
201 | "file-type-slim": "{\"compilers\":[\"slim\"]}",
202 | "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
203 | "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
204 | "file-type-kit": "{\"compilers\":[\"kit\"]}",
205 | "uglify-js": {
206 | "ie8": false,
207 | "compress": {
208 | "sequences": true,
209 | "properties": true,
210 | "dead_code": true,
211 | "drop_debugger": true,
212 | "unsafe": false,
213 | "unsafe_comps": false,
214 | "unsafe_math": false,
215 | "unsafe_proto": false,
216 | "unsafe_regexp": false,
217 | "conditionals": true,
218 | "comparisons": true,
219 | "evaluate": true,
220 | "booleans": true,
221 | "loops": true,
222 | "unused": true,
223 | "toplevel": false,
224 | "top_retain": "",
225 | "hoist_funs": true,
226 | "hoist_vars": false,
227 | "if_return": true,
228 | "join_vars": true,
229 | "collapse_vars": true,
230 | "reduce_vars": true,
231 | "warnings": false,
232 | "negate_iife": true,
233 | "pure_getters": false,
234 | "pure_funcs": [],
235 | "drop_console": false,
236 | "expression": false,
237 | "keep_fargs": false,
238 | "keep_fnames": false,
239 | "passes": 1,
240 | "keep_infinity": false,
241 | "side_effects": true,
242 | "global_defs": []
243 | },
244 | "output": {
245 | "ascii_only": false,
246 | "beautify": false,
247 | "comments": "",
248 | "indent_level": 4,
249 | "indent_start": 0,
250 | "inline_script": false,
251 | "keep_quoted_props": false,
252 | "max_line_len": false,
253 | "preamble": "",
254 | "preserve_line": false,
255 | "quote_keys": false,
256 | "quote_style": 0,
257 | "semicolons": true,
258 | "shebang": true,
259 | "width": 80
260 | }
261 | },
262 | "cssnext": {
263 | "customProperties": true,
264 | "applyRule": true,
265 | "calc": false,
266 | "nesting": true,
267 | "customMedia": true,
268 | "mediaQueriesRange": true,
269 | "customSelectors": true,
270 | "attributeCaseInsensitive": true,
271 | "colorRebeccapurple": true,
272 | "colorHwb": true,
273 | "colorGray": true,
274 | "colorHexAlpha": true,
275 | "colorFunction": true,
276 | "fontVariant": true,
277 | "filter": true,
278 | "initial": true,
279 | "rem": true,
280 | "pseudoElements": true,
281 | "pseudoClassMatches": true,
282 | "pseudoClassNot": true,
283 | "pseudoClassAnyLink": true,
284 | "colorRgba": true,
285 | "overflowWrap": true
286 | },
287 | "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
288 | "babel": {
289 | "useBabelRc": true,
290 | "presets": {
291 | "babel-preset-es2015": true
292 | },
293 | "plugins": {
294 | "babel-plugin-syntax-jsx": true,
295 | "babel-plugin-transform-react-jsx": true,
296 | "babel-plugin-transform-async-to-generator": true,
297 | "babel-plugin-transform-class-properties": true,
298 | "babel-plugin-transform-object-rest-spread": true
299 | }
300 | },
301 | "file-type-png": "{\"compilers\":[\"png\"]}",
302 | "file-type-jpg": "{\"compilers\":[\"jpg\"]}"
303 | }
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | // http://eslint.org/docs/rules/
3 | "parserOptions" : {
4 | "ecmaVersion": 6,
5 | "sourceType": "script"
6 | },
7 |
8 | "ecmaFeatures": {
9 | "binaryLiterals": false, // enable binary literals
10 | "blockBindings": true, // enable let and const (aka block bindings)
11 | "defaultParams": false, // enable default function parameters
12 | "forOf": true, // enable for-of loops
13 | "generators": true, // enable generators
14 | "objectLiteralComputedProperties": false, // enable computed object literal property names
15 | "objectLiteralDuplicateProperties": false, // enable duplicate object literal properties in strict mode
16 | "objectLiteralShorthandMethods": true, // enable object literal shorthand methods
17 | "objectLiteralShorthandProperties": true, // enable object literal shorthand properties
18 | "octalLiterals": true, // enable octal literals
19 | "regexUFlag": false, // enable the regular expression u flag
20 | "regexYFlag": false, // enable the regular expression y flag
21 | "templateStrings": true, // enable template strings
22 | "unicodeCodePointEscapes": false, // enable code point escapes
23 | "jsx": true // enable JSX
24 | },
25 |
26 | "env": {
27 | "browser": false, // browser global variables.
28 | "node": true, // Node.js global variables and Node.js-specific rules.
29 | "amd": false, // defines require() and define() as global variables as per the amd spec.
30 | "mocha": true, // adds all of the Mocha testing global variables.
31 | "jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0.
32 | "phantomjs": false, // phantomjs global variables.
33 | "jquery": false, // jquery global variables.
34 | "prototypejs": false, // prototypejs global variables.
35 | "shelljs": false, // shelljs global variables.
36 | },
37 |
38 | "globals": {
39 | // e.g. "angular": true
40 | },
41 |
42 | "plugins": [
43 | // e.g. "react" (must run `npm install eslint-plugin-react` first)
44 | ],
45 |
46 | "rules": {
47 | ////////// Possible Errors //////////
48 |
49 | "comma-dangle": 0, // allow trailing commas in object literals
50 | "no-cond-assign": 0, // disallow assignment in conditional expressions
51 | "no-console": 0, // disallow use of console (off by default in the node environment)
52 | "no-constant-condition": 0, // disallow use of constant expressions in conditions
53 | "no-control-regex": 0, // disallow control characters in regular expressions
54 | "no-debugger": 2, // disallow use of debugger
55 | "no-dupe-keys": 0, // disallow duplicate keys when creating object literals
56 | "no-empty": 0, // disallow empty statements
57 | "no-empty-character-class": 1,// disallow the use of empty character classes in regular expressions
58 | "no-ex-assign": 0, // disallow assigning to the exception in a catch block
59 | "no-extra-boolean-cast": 0, // disallow double-negation boolean casts in a boolean context
60 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
61 | "no-extra-semi": 1, // disallow unnecessary semicolons
62 | "no-func-assign": 0, // disallow overwriting functions written as function declarations
63 | "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks
64 | "no-invalid-regexp": 0, // disallow invalid regular expression strings in the RegExp constructor
65 | "no-irregular-whitespace": 0, // disallow irregular whitespace outside of strings and comments
66 | "no-negated-in-lhs": 0, // disallow negation of the left operand of an in expression
67 | "no-obj-calls": 0, // disallow the use of object properties of the global object (Math and JSON) as functions
68 | "no-regex-spaces": 0, // disallow multiple spaces in a regular expression literal
69 | "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default)
70 | "no-sparse-arrays": 0, // disallow sparse arrays
71 | "no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement
72 | "use-isnan": 0, // disallow comparisons with the value NaN
73 | "valid-jsdoc": 1, // Ensure JSDoc comments are valid (off by default)
74 | "valid-typeof": 0, // Ensure that the results of typeof are compared against a valid string
75 |
76 |
77 | ////////// Best Practices //////////
78 |
79 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default)
80 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
81 | "consistent-return": 0, // require return statements to either always or never specify values
82 | "curly": 0, // specify curly brace conventions for all control statements
83 | "default-case": 0, // require default case in switch statements (off by default)
84 | "dot-notation": 0, // encourages use of dot notation whenever possible
85 | "eqeqeq": 0, // require the use of === and !==
86 | "guard-for-in": 0, // make sure for-in loops have an if statement (off by default)
87 | "no-alert": 0, // disallow the use of alert, confirm, and prompt
88 | "no-caller": 0, // disallow use of arguments.caller or arguments.callee
89 | "no-div-regex": 0, // disallow division operators explicitly at beginning of regular expression (off by default)
90 | "no-else-return": 0, // disallow else after a return in an if (off by default)
91 | "no-empty-label": 0, // disallow use of labels for anything other then loops and switches
92 | "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default)
93 | "no-eval": 2, // disallow use of eval()
94 | "no-extend-native": 0, // disallow adding to native types
95 | "no-extra-bind": 0, // disallow unnecessary function binding
96 | "no-fallthrough": 0, // disallow fallthrough of case statements
97 | "no-floating-decimal": 0, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
98 | "no-implied-eval": 1, // disallow use of eval()-like methods
99 | "no-iterator": 0, // disallow usage of __iterator__ property
100 | "no-labels": 0, // disallow use of labeled statements
101 | "no-lone-blocks": 0, // disallow unnecessary nested blocks
102 | "no-loop-func": 0, // disallow creation of functions within loops
103 | "no-multi-spaces": 0, // disallow use of multiple spaces
104 | "no-multi-str": 0, // disallow use of multiline strings
105 | "no-native-reassign": 0, // disallow reassignments of native objects
106 | "no-new": 0, // disallow use of new operator when not part of the assignment or comparison
107 | "no-new-func": 0, // disallow use of new operator for Function object
108 | "no-new-wrappers": 0, // disallows creating new instances of String, Number, and Boolean
109 | "no-octal": 0, // disallow use of octal literals
110 | "no-octal-escape": 0, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
111 | "no-process-env": 0, // disallow use of process.env (off by default)
112 | "no-proto": 1, // disallow usage of __proto__ property
113 | "no-redeclare": 0, // disallow declaring the same variable more then once
114 | "no-return-assign": 0, // disallow use of assignment in return statement
115 | "no-script-url": 0, // disallow use of javascript: urls.
116 | "no-self-compare": 0, // disallow comparisons where both sides are exactly the same (off by default)
117 | "no-sequences": 0, // disallow use of comma operator
118 | "no-unused-expressions": 0, // disallow usage of expressions in statement position
119 | "no-void": 0, // disallow use of void operator (off by default)
120 | "no-warning-comments": 2, // disallow usage of configurable warning terms in comments, e.g. TODO or FIXME (off by default)
121 | "no-with": 0, // disallow use of the with statement
122 | "radix": 0, // require use of the second argument for parseInt() (off by default)
123 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default)
124 | "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default)
125 | "yoda": 0, // require or disallow Yoda conditions
126 |
127 |
128 | ////////// Strict Mode //////////
129 |
130 | "global-strict": 0, // (deprecated) require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
131 | "no-extra-strict": 0, // (deprecated) disallow unnecessary use of "use strict"; when already in strict mode
132 | "strict": 0, // controls location of Use Strict Directives
133 |
134 |
135 | ////////// Variables //////////
136 |
137 | "no-catch-shadow": 0, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
138 | "no-delete-var": 0, // disallow deletion of variables
139 | "no-label-var": 0, // disallow labels that share a name with a variable
140 | "no-shadow": 0, // disallow declaration of variables already declared in the outer scope
141 | "no-shadow-restricted-names": 0, // disallow shadowing of names such as arguments
142 | "no-undef": 0, // disallow use of undeclared variables unless mentioned in a /*global */ block
143 | "no-undef-init": 0, // disallow use of undefined when initializing variables
144 | "no-undefined": 0, // disallow use of undefined variable (off by default)
145 | "no-unused-vars": 0, // disallow declaration of variables that are not used in the code
146 | "no-use-before-define": 0, // disallow use of variables before they are defined
147 |
148 |
149 | ////////// Node.js //////////
150 |
151 | "handle-callback-err": 0, // enforces error handling in callbacks (off by default) (on by default in the node environment)
152 | "no-mixed-requires": 0, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
153 | "no-new-require": 0, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
154 | "no-path-concat": 0, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
155 | "no-process-exit": 0, // disallow process.exit() (on by default in the node environment)
156 | "no-restricted-modules": 0, // restrict usage of specified node modules (off by default)
157 | "no-sync": 0, // disallow use of synchronous methods (off by default)
158 |
159 |
160 | ////////// Stylistic Issues //////////
161 |
162 | "brace-style": [1,"stroustrup"],// enforce one true brace style (off by default)
163 | "camelcase": 1, // require camel case names
164 | "comma-spacing": 0, // enforce spacing before and after comma
165 | "comma-style": 0, // enforce one true comma style (off by default)
166 | "consistent-this": 0, // enforces consistent naming when capturing the current execution context (off by default)
167 | "eol-last": 0, // enforce newline at the end of file, with no multiple empty lines
168 | "func-names": 0, // require function expressions to have a name (off by default)
169 | "func-style": 0, // enforces use of function declarations or expressions (off by default)
170 | "key-spacing": 1, // enforces spacing between keys and values in object literal properties
171 | "max-nested-callbacks": 2, // specify the maximum depth callbacks can be nested (off by default)
172 | "new-cap": 1, // require a capital letter for constructors
173 | "new-parens": 0, // disallow the omission of parentheses when invoking a constructor with no arguments
174 | "no-array-constructor": 0, // disallow use of the Array constructor
175 | "no-inline-comments": 0, // disallow comments inline after code (off by default)
176 | "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default)
177 | "no-mixed-spaces-and-tabs": 0, // disallow mixed spaces and tabs for indentation
178 | "no-multiple-empty-lines": 0, // disallow multiple empty lines (off by default)
179 | "no-nested-ternary": 0, // disallow nested ternary expressions (off by default)
180 | "no-new-object": 0, // disallow use of the Object constructor
181 | "semi-spacing": 1, // enforce consistent spacing before and after semicolons
182 | "no-spaced-func": 0, // disallow space between function identifier and application
183 | "no-ternary": 0, // disallow the use of ternary operators (off by default)
184 | "no-trailing-spaces": 0, // disallow trailing whitespace at the end of lines
185 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers
186 | "no-wrap-func": 0, // disallow wrapping of non-IIFE statements in parens
187 | "one-var": 0, // allow just one var statement per function (off by default)
188 | "operator-assignment": 0, // require assignment operator shorthand where possible or prohibit it entirely (off by default)
189 | "padded-blocks": 0, // enforce padding within blocks (off by default)
190 | "quote-props": 0, // require quotes around object literal property names (off by default)
191 | "quotes": 0, // specify whether double or single quotes should be used
192 | "semi": 0, // require or disallow use of semicolons instead of ASI
193 | "sort-vars": 0, // sort variables within the same declaration block (off by default)
194 | "space-after-function-name": 0, // require a space after function names (off by default)
195 | "space-after-keywords": 0, // require a space after certain keywords (off by default)
196 | "space-before-blocks": 0, // require or disallow space before blocks (off by default)
197 | "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default)
198 | "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default)
199 | "space-infix-ops": 0, // require spaces around operators
200 | "space-return-throw-case": 0, // require a space after return, throw, and case
201 | "space-unary-ops": 0, // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
202 | "spaced-line-comment": 0, // require or disallow a space immediately following the // in a line comment (off by default)
203 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
204 |
205 |
206 | ////////// ECMAScript 6 //////////
207 |
208 | "no-var": 1, // require let or const instead of var (off by default)
209 | "generator-star": 0, // enforce the position of the * in generator functions (off by default)
210 |
211 |
212 | ////////// Legacy //////////
213 |
214 | "max-depth": 2, // specify the maximum depth that blocks can be nested (off by default)
215 | "max-len": 0, // specify the maximum length of a line in your program (off by default)
216 | "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default)
217 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
218 | "no-bitwise": 0, // disallow use of bitwise operators (off by default)
219 | "no-plusplus": 0 // disallow use of unary operators, ++ and -- (off by default)
220 | }
221 | }
--------------------------------------------------------------------------------
/src/datepicker.js:
--------------------------------------------------------------------------------
1 | ((glob) => {
2 |
3 | const prevSVG = `Previous Month Next Month `
383 | let calendar = this.getCalendar()
384 |
385 | let {dateMax, dateMin} = this.source.dataset
386 |
387 | if(dateMax)
388 | dateMax = new Date(dateMax)
389 | if(dateMin)
390 | dateMin = new Date(dateMin)
391 |
392 | let val = null
393 | if(this.source.nodeName === 'INPUT')
394 | val = new Date(this.source.value)
395 | else if (this.source.dataset.dateVal)
396 | val = new Date(this.source.dataset.dateVal)
397 |
398 | // find offset of first date.
399 | let offsetDay = dates[0].getDay()
400 |
401 | const dateEqual = (base, compare) => base.getDate() === compare.getDate() && base.getMonth() === compare.getMonth() && base.getYear() == compare.getYear()
402 |
403 | dates.forEach((date, idx) => {
404 |
405 | let classes = [];
406 |
407 | // check if the date is today
408 | if (dateEqual(today, date)) {
409 | classes.push('today');
410 | }
411 |
412 | // check if this is the selected value
413 | if(val && dateEqual(date, val)) {
414 | classes.push('selected');
415 | }
416 |
417 | // check if the date is within the min range, if one is set
418 | if(dateMin && (dateMin.getTime() - date.getTime()) > 0) {
419 | classes.push('disabled');
420 | }
421 |
422 | // check if the date is within the max range, if one is set
423 | if(dateMax && (dateMax.getTime() - date.getTime()) < 0) {
424 | classes.push('disabled');
425 | }
426 |
427 | classes = classes.join(' ');
428 |
429 | const days = {
430 | "Mon": "Monday",
431 | "Tue": "Tuesday",
432 | "Wed": "Wednesday",
433 | "Thu": "Thursday",
434 | "Fri": "Friday",
435 | "Sat": "Saturday",
436 | "Sun": "Sunday"
437 | }
438 |
439 | let ariaString = date.toDateString();
440 | ariaString = [ariaString.substr(0,3), ariaString.substr(4)];
441 | ariaString[0] = `${days[ariaString[0]]}, `;
442 |
443 | ariaString[1] = [ariaString[1].substr(0,3), ariaString[1].substr(4)];
444 | ariaString[1][0] = this.getFullMonthName(date.getMonth());
445 | ariaString[1] = ariaString[1].join(" ");
446 | ariaString = ariaString.join("");
447 |
448 | if (idx !== 0) {
449 | markup += `${date.getDate()} `
450 | }
451 | else {
452 | markup += `${date.getDate()} `
453 | }
454 |
455 | })
456 |
457 | markup += `
`
458 |
459 | return markup
460 |
461 | }
462 |
463 | drawCalendar() {
464 |
465 | let now = new Date();
466 |
467 | if (this.source.hasAttribute("value") && !!(this.source.value) && this.source.value.trim().length) {
468 | now = new Date(this.source.value);
469 | }
470 |
471 | let year = now.getFullYear()
472 | let month = now.getMonth()
473 |
474 | let dates = this.getDaysArrayByMonth(now)
475 | let days = ['S', 'M', 'T', 'W', 'T', 'F', 'S']
476 |
477 | let markup = `
478 |
479 |
${this.getMonthName(now.getMonth())}, ${now.getFullYear()}
480 | ${prevSVG}
481 | ${nextSVG}
482 |
483 |
`
484 |
485 | days.forEach((day) => {
486 | markup += `
${day}
`
487 | })
488 |
489 | markup += `
490 | ${this.drawDates(dates)}
491 |
Previous Month Next Month `
447 | let calendar = this.getCalendar()
448 |
449 | let {dateMax, dateMin} = this.source.dataset
450 |
451 | if(dateMax)
452 | dateMax = new Date(dateMax)
453 | if(dateMin)
454 | dateMin = new Date(dateMin)
455 |
456 | let val = null
457 | if(this.source.nodeName === 'INPUT')
458 | val = new Date(this.source.value)
459 | else if (this.source.dataset.dateVal)
460 | val = new Date(this.source.dataset.dateVal)
461 |
462 | // find offset of first date.
463 | let offsetDay = dates[0].getDay()
464 |
465 | const dateEqual = (base, compare) => base.getDate() === compare.getDate() && base.getMonth() === compare.getMonth() && base.getYear() == compare.getYear()
466 |
467 | dates.forEach((date, idx) => {
468 |
469 | let classes = [];
470 |
471 | // check if the date is today
472 | if (dateEqual(today, date)) {
473 | classes.push('today');
474 | }
475 |
476 | // check if this is the selected value
477 | if(val && dateEqual(date, val)) {
478 | classes.push('selected');
479 | }
480 |
481 | // check if the date is within the min range, if one is set
482 | if(dateMin && (dateMin.getTime() - date.getTime()) > 0) {
483 | classes.push('disabled');
484 | }
485 |
486 | // check if the date is within the max range, if one is set
487 | if(dateMax && (dateMax.getTime() - date.getTime()) < 0) {
488 | classes.push('disabled');
489 | }
490 |
491 | classes = classes.join(' ');
492 |
493 | const days = {
494 | "Mon": "Monday",
495 | "Tue": "Tuesday",
496 | "Wed": "Wednesday",
497 | "Thu": "Thursday",
498 | "Fri": "Friday",
499 | "Sat": "Saturday",
500 | "Sun": "Sunday"
501 | }
502 |
503 | let ariaString = date.toDateString();
504 | ariaString = [ariaString.substr(0,3), ariaString.substr(4)];
505 | ariaString[0] = `${days[ariaString[0]]}, `;
506 |
507 | ariaString[1] = [ariaString[1].substr(0,3), ariaString[1].substr(4)];
508 | ariaString[1][0] = this.getFullMonthName(date.getMonth());
509 | ariaString[1] = ariaString[1].join(" ");
510 | ariaString = ariaString.join("");
511 |
512 | if (idx !== 0) {
513 | markup += `${date.getDate()} `
514 | }
515 | else {
516 | markup += `${date.getDate()} `
517 | }
518 |
519 | })
520 |
521 | markup += `
`
522 |
523 | return markup
524 |
525 | }
526 |
527 | drawCalendar() {
528 |
529 | let now = new Date();
530 |
531 | if (this.source.hasAttribute("value") && !!(this.source.value) && this.source.value.trim().length) {
532 | now = new Date(this.source.value);
533 | }
534 |
535 | let year = now.getFullYear()
536 | let month = now.getMonth()
537 |
538 | let dates = this.getDaysArrayByMonth(now)
539 | let days = ['S', 'M', 'T', 'W', 'T', 'F', 'S']
540 |
541 | let markup = `
542 |
543 |
${this.getMonthName(now.getMonth())}, ${now.getFullYear()}
544 | ${prevSVG}
545 | ${nextSVG}
546 |
547 |
`
548 |
549 | days.forEach((day) => {
550 | markup += `
${day}
`
551 | })
552 |
553 | markup += `
554 | ${this.drawDates(dates)}
555 |
889 | `
890 |
891 | // draw hours dropdown
892 | let hours = Array.from(Array(13).keys())
893 | hours.shift()
894 | markup += hours
895 | .map((item) => {
896 | if(item === hoursVal)
897 | return `${item} `
898 | return `${item} `
899 | }).join(' ')
900 |
901 | markup += `
902 | `
903 |
904 | // draw minutes dropdown
905 | markup += Array.from(Array(60).keys())
906 | .map((item) => {
907 | if(item.toString().length === 1)
908 | item = '0' + item
909 | if(item.toString() === minVal)
910 | return `${item} `
911 | return `${item} `
912 | }).join(' ')
913 |
914 | // AM, PM
915 | markup += `
916 |
917 | AM
918 | PM
919 | `
920 |
921 | markup +=`
922 |
`
923 |
924 | return markup
925 | }
926 |
927 | cleanupTimer(evt, timer) {
928 | if(evt && evt.preventDefault)
929 | evt.preventDefault()
930 |
931 | if(timer) {
932 |
933 | mutate(() => {
934 | timer.classList.remove('active')
935 | })
936 | .then(() => wait(500))
937 | .then(() => {
938 | this.source = undefined
939 | if(timer.parentNode)
940 | document.body.removeChild(timer)
941 | })
942 | .catch(err => {
943 | console.error(err)
944 | })
945 |
946 | }
947 |
948 | document.body.removeEventListener('click', this.bodyClick, false)
949 | document.body.removeEventListener('keydown', this.bodyInput, false)
950 |
951 | return false
952 | }
953 |
954 | }
955 |
956 | if(glob && glob.exports) {
957 | glob.exports = Object.assign({}, {
958 | 'TimePicker': TimePicker,
959 | 'timePicker': new TimePicker()
960 | })
961 | }
962 | else {
963 | glob.TimePicker = TimePicker
964 | glob.timePicker = new TimePicker()
965 | }
966 |
967 | })(typeof module === "undefined" ? window : module);
968 |
969 | ((glob) => {
970 | class RangePicker {
971 | constructor(elem) {
972 | this.elem = elem
973 | this.initialized = false
974 | this.init()
975 | }
976 |
977 | init () {
978 | if (!this.elem)
979 | return
980 |
981 | if (this.initialized)
982 | return
983 | this.initialized = true
984 |
985 | let time = +new Date()
986 |
987 | this.startElem = this.elem.querySelector('.range-start')
988 | this.endElem = this.elem.querySelector('.range-end')
989 |
990 | this.startElem.setAttribute("type", "text")
991 | this.endElem.setAttribute("type", "text")
992 |
993 | this.startElem.classList.add('start'+time)
994 | this.endElem.classList.add('end'+time)
995 |
996 | this.startController = new DatePicker('start'+time)
997 | this.endController = new DatePicker('end'+time)
998 |
999 | this.startController.callback = this.callback.bind(this)
1000 | this.endController.callback = this.startController.callback
1001 | }
1002 |
1003 | callback() {
1004 | let args = [...arguments]
1005 | let elem = args[0]
1006 | let val = args[1]
1007 |
1008 | let isStart = elem.classList.contains('range-start')
1009 |
1010 | if (isStart)
1011 | this.start = val
1012 | else
1013 | this.end = val
1014 |
1015 | if (isStart) {
1016 | // update the min-date of the end-range
1017 | // this needs to be adjusted such that
1018 | // the min-date also includes the selected date
1019 | // for single day ranges.
1020 |
1021 | const selected = new Date(val);
1022 |
1023 | const newMax = new Date(selected.setDate(selected.getDate() - 1));
1024 |
1025 | const month = DatePicker.zeroPaddedFormatMonth(newMax);
1026 | const dateStr = DatePicker.zeroPaddedFormatDate(newMax);
1027 |
1028 | this.endElem.dataset.dateMin = `${newMax.getFullYear()}-${month}-${dateStr}`
1029 | }
1030 |
1031 | }
1032 | }
1033 |
1034 | if (glob.hasOwnProperty('exports'))
1035 | glob.exports = Object.assign({}, glob.exports, RangePicker)
1036 | else
1037 | glob.RangePicker = RangePicker
1038 |
1039 | })(typeof module === "undefined" ? window : module);
1040 |
1041 | ((glob) => {
1042 |
1043 | if (!glob)
1044 | return; // exit early as we only wish to target the browser environment
1045 |
1046 | /*
1047 | * we check early if the browser natively supports
1048 | * input[type="date"],
1049 | * input[type="time"],
1050 | * input[type="datetime-local"]
1051 | */
1052 |
1053 | let checks = {
1054 | 'date': false,
1055 | 'time': false,
1056 | 'datetime-local': false
1057 | }
1058 |
1059 | let input = document.createElement("input")
1060 |
1061 | Object.keys(checks).forEach(key => {
1062 | input.type = key
1063 | // if the input type is the same as we set it, it is supported by the browser
1064 | checks[key] = input.type === key
1065 | })
1066 |
1067 | const DATE_TIME_EXP = /([\d]{4}\-[\d]{2}\-[\d]{2})T([\d]{2}\:[\d]{2})/
1068 |
1069 | const hookTime = () => {
1070 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="time"]'))
1071 | inputs.forEach(attachTimeTrigger)
1072 | }
1073 |
1074 | const hookDate = () => {
1075 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="date"]'))
1076 | inputs.forEach(attachDateTrigger)
1077 | }
1078 |
1079 | const hookDateTime = () => {
1080 | /*
1081 | * when datetime-local is not supported,
1082 | * we split the current input into two separate inputs.
1083 | * One for date, the other for time.
1084 | * We set the original input elem to "hidden" and manipulate
1085 | * it's value so the user still retains the name of that field in the form
1086 | */
1087 | let inputs = Array.prototype.slice.call(document.querySelectorAll('input[type="datetime-local"]'))
1088 | inputs.forEach(elem => {
1089 |
1090 | // create a reference for the parent node because we need it later
1091 | const input = elem
1092 | const container = input.parentNode
1093 | const getTarget = () => container.querySelector("input[data-original='datetime-local']")
1094 |
1095 | let value = input.value,
1096 | hasValue = value.trim().length > 0,
1097 | date = null,
1098 | time = null
1099 |
1100 | if (hasValue && DATE_TIME_EXP.test(value)) {
1101 | date = value.replace(DATE_TIME_EXP, "$1")
1102 | time = value.replace(DATE_TIME_EXP, "$2")
1103 | }
1104 |
1105 | const dateChange = evt => {
1106 | let target = getTarget()
1107 | target.dataset.date = evt.target.value
1108 | }
1109 |
1110 | const timeChange = evt => {
1111 | let target = getTarget()
1112 | target.dataset.time = evt.target.value
1113 | }
1114 |
1115 | // define a custom getter for value which utilizes the above two dataset values
1116 | input.__defineGetter__("value", function() {
1117 | return ((this.dataset.date||"" )+ " " + (this.dataset.time||"")).trim()
1118 | })
1119 |
1120 | // set the type to hidden so it's still in the DOM, but not visible to the user
1121 | input.type = "hidden"
1122 | // set this custom dataset prop so we can query for it later
1123 | input.dataset.original = "datetime-local"
1124 |
1125 | // create our new date input
1126 | let inDate = document.createElement("input")
1127 | inDate.type = checks.date ? "date" : "text"
1128 | inDate.placeholder = "Date"
1129 | inDate.oninput = dateChange;
1130 |
1131 | if (date)
1132 | inDate.value = date
1133 |
1134 | // check if date-min and date-max are set
1135 | let {dateMin, dateMax} = input.dataset
1136 | if (dateMin)
1137 | inDate.dataset.dateMin = dateMin
1138 | if (dateMax)
1139 | inDate.dataset.dateMax = dateMax
1140 |
1141 | // create our new time input
1142 | let inTime = document.createElement("input")
1143 | inTime.type = checks.time ? "time" : "text"
1144 | inTime.placeholder = "Time"
1145 | inTime.oninput = timeChange;
1146 |
1147 | if (time)
1148 | inTime.value = time;
1149 |
1150 | [inDate, inTime].forEach(inp => {
1151 | inp.__defineGetter__("required", function() {
1152 | return input.required
1153 | })
1154 |
1155 | inp.__defineGetter__("validity", function() {
1156 | return input.validity
1157 | })
1158 |
1159 | inp.__defineGetter__("pattern", function() {
1160 | return input.pattern
1161 | })
1162 |
1163 | inp.__defineGetter__("validationMessage", function() {
1164 | return input.validationMessage
1165 | })
1166 |
1167 | inp.__defineSetter__("validationMessage", function(val) {
1168 | input.validationMessage = val
1169 | })
1170 | })
1171 |
1172 | // add them to the DOM after the OG
1173 | container.insertAdjacentElement("beforeEnd", inDate)
1174 | container.insertAdjacentElement("beforeEnd", inTime)
1175 |
1176 | // attach the triggers
1177 | attachDateTrigger(inDate)
1178 | attachTimeTrigger(inTime)
1179 | })
1180 | }
1181 |
1182 | if (!checks.date)
1183 | hookDate()
1184 | if (!checks.time)
1185 | hookTime()
1186 | if (!checks['datetime-local'])
1187 | hookDateTime()
1188 |
1189 | // expose functions to the window
1190 | glob.hookDate = hookDate;
1191 | glob.hookTime = hookTime;
1192 | glob.hookDateTimer = hookDateTime;
1193 |
1194 | })(typeof module === "undefined" ? window : undefined);
1195 |
1196 | //# sourceMappingURL=dzdatetimepicker-dist.js.map
--------------------------------------------------------------------------------