├── .gitignore ├── LICENSE ├── README.md ├── dist ├── date-util.d.ts ├── index.d.ts ├── simplepicker.css ├── simplepicker.css.map ├── simplepicker.js ├── simplepicker.js.map ├── simplepicker.node.js ├── simplepicker.node.js.map └── template.d.ts ├── index-multi.html ├── index.html ├── lib ├── date-util.ts ├── index.ts ├── simplepicker.css └── template.ts ├── package-lock.json ├── package.json ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Priyank Patel 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 | 23 | ###################################### 24 | ######## THIRD PARTY LICENSE ######### 25 | ###################################### 26 | ###################################### 27 | 28 | LICENSE for the icons used for the project. 29 | Icons used are base64 encoded in css files in this 30 | project and are from fathericons. 31 | 32 | ------------ Fathericons LICENSE ---------------- 33 | 34 | The MIT License (MIT) 35 | 36 | Copyright (c) 2013-2017 Cole Bemis 37 | 38 | Permission is hereby granted, free of charge, to any person obtaining a copy 39 | of this software and associated documentation files (the "Software"), to deal 40 | in the Software without restriction, including without limitation the rights 41 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 42 | copies of the Software, and to permit persons to whom the Software is 43 | furnished to do so, subject to the following conditions: 44 | 45 | The above copyright notice and this permission notice shall be included in all 46 | copies or substantial portions of the Software. 47 | 48 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 49 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 50 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 51 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 52 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 53 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 54 | SOFTWARE. 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # simplepicker 2 | 3 | Simple datetime picker in vanilla javascript. 4 | This project is mostly based on [material-datetime-picker](https://github.com/ripjar/material-datetime-picker), but 5 | without it relying on external dependencies like `moment`, 6 | `rome`, and `materialize`. 7 | 8 | ## Installation 9 | 10 | Install from npm: 11 | ``` 12 | npm install simplepicker 13 | ``` 14 | 15 | We also started to [publish this package](https://github.com/priyank-p/simplepicker/packages/) (starting from v2.0.0) to GitHub's package registry. 16 | If you prefer the installing it from there you will need to [follow GitHub's instructions](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry#installing-a-package). 17 | 18 | ## Usage 19 | 20 | To use simplepicker in your project you will need to include 21 | CSS and JavaScript files in `dist/` directory. CSS file `dist/simplepicker.css` 22 | is used to style the simplepicker and the JavaScript file required is in `dist/simplepicker.js`. 23 | 24 | If you use build tools, therefore `require` or ES6 `import`, you can also 25 | `require` or `import` simplepicker; if you use typescript you'll need to do 26 | `import SimplePicker = require('simplepicker');`. 27 | 28 | If you include the js file in dist folder, `SimplePicker` is defined using 29 | `var` declaration and is avalible as `SimplePicker`. 30 | 31 | For typescript projects we provide the typescript declaration file 32 | with the npm package. 33 | 34 | ## API 35 | 36 | This library is exported as a constructor, so you will need to create 37 | and instance of the simplepicker. 38 | 39 | #### `new SimplePicker([el, opts])`: 40 | * `el` (optional, `string`, `Element`) - this parameter is optional 41 | but if no selector or element is passed it defaults to `body`. 42 | 43 | * `opts` (optional, `object`) - possible options: 44 | - `zIndex` (`number`): sets the `z-index` for the simplepicker. 45 | - `disableTimeSection` (`boolean`): If `true` disables the time picker section. 46 | - `compactMode` (`boolean`): If `true` the simplepicker will be more compact; the large 47 | display of the selected date, i.e. 25th will not be displayed. 48 | - `selectedDate` (`Date`): initialize the simplepicker with this date, if not used then today 49 | will be used 50 | 51 | The first argument passed could be `opts`. 52 | 53 | This method creates new simplepicker instance, and inserts it into the dom. 54 | It throws error only if the selector passed is not valid. 55 | ```javascript 56 | const simplepicker = new SimplePicker(); 57 | ``` 58 | 59 | **Note:** You can have two `SimplePicker` instances but they both must have 60 | two diffrent element passed in to bind to otherwise they both will trigger the same 61 | event; this is beacuse they both will respond to event triggred by the same element. 62 | 63 | ```javascript 64 | // below both picker1 and picker2 are the same. 65 | const picker1 = new SimplePicker(); 66 | const picker2 = new SimplePicker(); 67 | 68 | // but to have to diffrent picker on same page 69 | // you will need to pass a diffrent selector as shown below. 70 | const picker1 = new SimplePicker(); 71 | const picker2 = new SimplePicker('.some-element'); 72 | ``` 73 | 74 | #### `simplepicker.open()` 75 | 76 | This method opens the picker. The picker is hidden automatically 77 | when the `Cancel` button or the overlay is clicked. 78 | 79 | If it closed due to an user action the `close` event is triggred whereas 80 | if the user selected an date the `submit` event it triggred. See `on` method 81 | below to listen to these events. 82 | 83 | #### `simplepicker.close()` 84 | 85 | This method closes the picker without the user's action. 86 | Make sure you are not ruining user experience unnecessarily. 87 | 88 | #### `simplepicker.reset(date)`: 89 | * `date` (optional, `Date`) - The date to select after reset. Default is current date (as in `new Date()`). 90 | 91 | **Note**: This method will overrride what the user may have already selected. Therefore, 92 | use it with care considering user experience. 93 | 94 | The example below sets resets to a date before showing the picker. 95 | ```javascript 96 | const sp = new SimplePicker(); 97 | sp.reset(new Date(2019, 12, 31, 7, 0, 0)); 98 | sp.open(); 99 | ``` 100 | 101 | #### `simplepicker.on(event, handler)`: 102 | - `event` (required, `string`): The name of the event, currently 103 | `submit`, and `close` are supported. 104 | - `handler` (required, `function`): This handler is called then 105 | the event is triggred. 106 | 107 | This function attaches a listener to simplepicker, which are called on sepecific events. 108 | There could be multiple event listeners for a single event. 109 | 110 | Events: 111 | - `submit`: `handler(date, readableDate)` - Called 112 | when user selects the date. It is called with two arguments: 113 | `date` is first arguments that is a javascript date object, and 114 | the second parameter is `readableDate` a string with date in format 115 | `1st October 2018 12:00 AM`. 116 | - `close`: `handler()` - It is called when due to user's action the 117 | picker was close. It happens when user clicks the cancel button 118 | or the picker overlay. Its handlers are called with no arguments. 119 | 120 | #### `simplepicker.disableTimeSection()` 121 | 122 | This method disables the time picker section. 123 | 124 | #### `simplepicker.enableTimeSection()` 125 | 126 | This method re-enables the time picker section if it was previously disabled. 127 | -------------------------------------------------------------------------------- /dist/date-util.d.ts: -------------------------------------------------------------------------------- 1 | export interface MonthTracker { 2 | years: Object; 3 | current?: Date; 4 | } 5 | export declare const monthTracker: MonthTracker; 6 | export declare const months: string[]; 7 | export declare const days: string[]; 8 | export declare function scrapeMonth(date: Date): { 9 | date: Date; 10 | month: undefined; 11 | }; 12 | export declare function scrapePreviousMonth(): { 13 | date: Date; 14 | month: undefined; 15 | }; 16 | export declare function scrapeNextMonth(): { 17 | date: Date; 18 | month: undefined; 19 | }; 20 | export declare function getDisplayDate(_date: any): string; 21 | export declare function formatTimeFromInputElement(input: string): string; 22 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | declare type SimplePickerEvent = 'submit' | 'close'; 2 | interface SimplePickerOpts { 3 | zIndex?: number; 4 | compactMode?: boolean; 5 | disableTimeSection?: boolean; 6 | selectedDate?: Date; 7 | } 8 | declare type HandlerFunction = (...args: unknown[]) => void; 9 | interface EventHandlers { 10 | [key: string]: HandlerFunction[]; 11 | } 12 | declare class SimplePicker { 13 | selectedDate: Date; 14 | $simplePicker: HTMLElement; 15 | readableDate: string; 16 | _eventHandlers: EventHandlers; 17 | _validOnListeners: readonly ["submit", "close"]; 18 | private opts; 19 | private $; 20 | private $$; 21 | private $simplepicker; 22 | private $simplepickerWrapper; 23 | private $trs; 24 | private $tds; 25 | private $headerMonthAndYear; 26 | private $monthAndYear; 27 | private $date; 28 | private $day; 29 | private $time; 30 | private $timeInput; 31 | private $timeSectionIcon; 32 | private $cancel; 33 | private $ok; 34 | private $displayDateElements; 35 | constructor(arg1?: HTMLElement | string | SimplePickerOpts, arg2?: SimplePickerOpts); 36 | initElMethod(el: any): void; 37 | init(el: HTMLElement, opts: SimplePickerOpts): void; 38 | reset(newDate?: Date): void; 39 | compactMode(): void; 40 | disableTimeSection(): void; 41 | enableTimeSection(): void; 42 | injectTemplate(el: HTMLElement): void; 43 | clearRows(): void; 44 | updateDateComponents(date: Date): void; 45 | render(data: any): void; 46 | updateSelectedDate(el?: HTMLElement): void; 47 | selectDateElement(el: HTMLElement): void; 48 | findElementWithDate(date: any, returnLastIfNotFound?: boolean): any; 49 | handleIconButtonClick(el: HTMLElement): void; 50 | initListeners(): void; 51 | callEvent(event: SimplePickerEvent, dispatcher: (a: HandlerFunction) => void): void; 52 | open(): void; 53 | close(): void; 54 | on(event: SimplePickerEvent, handler: HandlerFunction): void; 55 | toogleDisplayFade(): void; 56 | } 57 | export = SimplePicker; 58 | -------------------------------------------------------------------------------- /dist/simplepicker.css: -------------------------------------------------------------------------------- 1 | .simplepicker-wrapper{position:fixed;top:0;left:0;overflow:auto;background-color:#4c4c4c7d;width:100vw;height:100vh;display:none}.simplepicker-wrapper.active{display:block}.simpilepicker-date-picker{width:326px;cursor:auto;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:14px;background-color:#fff;margin:2% auto;box-shadow:1px 2px 4px .5px rgba(0,0,0,.22),1px 2px 4px .5px transparent}.simplepicker-day-header{color:#fff;background-color:#016565;text-align:center;padding:4px 0}.simplepicker-date-section{text-align:center;background-color:#078e8e;color:#fff}.simplepicker-date-section .simplepicker-month-and-year{font-size:22px;padding:14px 0 7px;font-weight:200}.simplepicker-date-section .simplepicker-date{font-size:35px;padding:2px;margin-bottom:12px}.simplepicker-select-pane{display:flex;width:100%}.simplepicker-select-pane .simplepicker-time,.simplepicker-selected-date{text-align:center;flex:2}.simplepicker-icon,.simplepicker-selected-date,.simplepicker-time{border:none;background:transparent;padding:2px;margin:4px 6px;width:25px;height:25px;opacity:.5}.simplepicker-selected-date,.simplepicker-time{opacity:1}.simplepicker-month-switcher{margin-top:5px}.simplepicker-icon:hover{opacity:.8}.simplepicker-icon.active,.simplepicker-icon:active{opacity:1}.simplepicker-icon:focus{outline:none}.simplepicker-icon-next{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==)}.simplepicker-icon-previous{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=)}.simplepicker-icon-calender{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==)}.simplepicker-icon-time{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+)}.simplepicker-bottom-part{padding-top:6px;padding-bottom:12px;padding-left:48%}.simplepicker-calender table{width:100%;font-size:13px}.simplepicker-calender thead th{font-weight:400;font-size:15px;padding-bottom:6px;width:14.28%;height:30px;text-align:center}.simplepicker-calender tbody td{position:relative;text-align:center;vertical-align:middle;padding:12px;z-index:1}.simplepicker-calender tbody td:after{content:" ";visibility:hidden;display:block;position:absolute;left:50%;top:50%;height:35px;width:35px;border-radius:50%;transform:translate(-50%,-50%);background-color:rgba(0,0,0,.05)}.simplepicker-calender tbody td:hover:after{visibility:visible}.simplepicker-calender tbody td.active,.simplepicker-calender tbody td:active{color:#fff}.simplepicker-calender tbody .active:after,.simplepicker-calender tbody td:active:after{visibility:visible;background-color:teal;z-index:-1}.simplepicker-calender tbody td[data-empty]{pointer-events:none}.simplepicker-time-section{display:none;height:120px}.simplepicker-time-section input{box-sizing:border-box;width:120px;height:32px;max-width:120px;max-height:32px;padding:4px 3px;border:none;border-bottom:2px solid #ccc;font-size:14px;font-family:Verdana,Geneva,Tahoma,sans-serif;display:block;margin:25% auto}.simplepicker-time-section input:focus{outline:none;border-bottom-color:teal}.simplepicker-picker-section{width:100%;height:auto}.simplepicker-btn{border:none;background:transparent;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:16px;padding:7px 14px;border:1px solid #ddd;margin:0 5px;border-color:#016565;color:#016565;font-size:13px}.simplepicker-btn:active,.simplepicker-btn:hover{color:#fff;background-color:#016565}.simplepicker-fade{color:hsla(0,0%,88%,.95)}.simplepicker-btn,.simplepicker-icon,.simplepicker-wrapper{cursor:pointer} 2 | 3 | /*# sourceMappingURL=simplepicker.css.map*/ -------------------------------------------------------------------------------- /dist/simplepicker.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://SimplePicker/./lib/simplepicker.css"],"names":[],"mappings":"AAAA,sBACE,eACA,MACA,OACA,cACA,2BACA,YACA,aACA,YAAc,CAGhB,6BACE,aAAe,CAGjB,2BACE,YACA,YACA,6CACA,eACA,sBACA,eACA,wEACgD,CAGlD,yBACE,WACA,yBACA,kBACA,aAAe,CAGjB,2BACE,kBACA,yBACA,UAAY,CAGd,wDACE,eACA,mBACA,eAAiB,CAGnB,8CACE,eACA,YACA,kBAAoB,CAGtB,0BACE,aACA,UAAY,CAGd,yEAEE,kBACA,MAAQ,CAGV,kEAEE,YACA,uBACA,YACA,eACA,WACA,YACA,UAAa,CAGf,+CACE,SAAW,CAGb,6BACE,cAAgB,CAGlB,yBACE,UAAa,CAGf,oDACE,SAAW,CAGb,yBACE,YAAc,CAGhB,wBACE,4cAA8c,CAGhd,4BACE,wcAA0c,CAG5c,4BACE,4kBAA8kB,CAGhlB,wBACE,4bAA8b,CAGhc,0BACE,gBACA,oBACA,gBAAkB,CAGpB,6BACE,WACA,cAAgB,CAGlB,gCACE,gBACA,eACA,mBACA,aACA,YACA,iBAAmB,CAGrB,gCACE,kBACA,kBACA,sBACA,aACA,SAAW,CAGb,sCACE,YACA,kBACA,cACA,kBACA,SACA,QACA,YACA,WACA,kBACA,+BACA,gCAAsC,CAGxC,4CACE,kBAAoB,CAGtB,8EAEE,UAAY,CAGd,wFAEE,mBACA,sBACA,UAAY,CAGd,4CACE,mBAAqB,CAGvB,2BACE,aACA,YAAc,CAGhB,iCACE,sBACA,YACA,YACA,gBACA,gBACA,gBACA,YACA,6BACA,eACA,6CACA,cACA,eAAiB,CAGnB,uCACE,aACA,wBAA0B,CAG5B,6BACE,WACA,WAAa,CAGf,kBACE,YACA,uBACA,6CACA,eACA,iBACA,sBACA,aACA,qBACA,cACA,cAAgB,CAGlB,iDACE,WACA,wBAA0B,CAG5B,mBACE,wBAAiC,CAGnC,2DAEE,cAAgB,C","file":"simplepicker.css","sourcesContent":[".simplepicker-wrapper {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n overflow: auto;\r\n background-color: #4c4c4c7d;\r\n width: 100vw;\r\n height: 100vh;\r\n display: none;\r\n}\r\n\r\n.simplepicker-wrapper.active {\r\n display: block;\r\n}\r\n\r\n.simpilepicker-date-picker {\r\n width: 326px;\r\n cursor: initial;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n font-size: 14px;\r\n background-color: #fff;\r\n margin: 2% auto;\r\n box-shadow: 1px 2px 4px 0.5px rgba(0, 0, 0, 0.22),\r\n 1px 2px 4px 0.5px rgba(0, 0, 0, 0.);\r\n}\r\n\r\n.simplepicker-day-header {\r\n color: #fff;\r\n background-color: #016565;\r\n text-align: center;\r\n padding: 4px 0;\r\n}\r\n\r\n.simplepicker-date-section {\r\n text-align: center;\r\n background-color: #078e8e;\r\n color: #fff;\r\n}\r\n\r\n.simplepicker-date-section .simplepicker-month-and-year {\r\n font-size: 22px;\r\n padding: 14px 0 7px 0;\r\n font-weight: 200;\r\n}\r\n\r\n.simplepicker-date-section .simplepicker-date {\r\n font-size: 35px;\r\n padding: 2px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.simplepicker-select-pane {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.simplepicker-select-pane .simplepicker-time,\r\n.simplepicker-selected-date {\r\n text-align: center;\r\n flex: 2;\r\n}\r\n\r\n.simplepicker-icon, .simplepicker-time,\r\n.simplepicker-selected-date {\r\n border: none;\r\n background: transparent;\r\n padding: 2px;\r\n margin: 4px 6px;\r\n width: 25px;\r\n height: 25px;\r\n opacity: 0.5;\r\n}\r\n\r\n.simplepicker-time, .simplepicker-selected-date {\r\n opacity: 1;\r\n}\r\n\r\n.simplepicker-month-switcher {\r\n margin-top: 5px;\r\n}\r\n\r\n.simplepicker-icon:hover {\r\n opacity: 0.8;\r\n}\r\n\r\n.simplepicker-icon:active, .simplepicker-icon.active {\r\n opacity: 1;\r\n}\r\n\r\n.simplepicker-icon:focus {\r\n outline: none;\r\n}\r\n\r\n.simplepicker-icon-next {\r\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==);\r\n}\r\n\r\n.simplepicker-icon-previous {\r\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=);\r\n}\r\n\r\n.simplepicker-icon-calender {\r\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==);\r\n}\r\n\r\n.simplepicker-icon-time {\r\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+);\r\n}\r\n\r\n.simplepicker-bottom-part {\r\n padding-top: 6px;\r\n padding-bottom: 12px;\r\n padding-left: 48%;\r\n}\r\n\r\n.simplepicker-calender table {\r\n width: 100%;\r\n font-size: 13px;\r\n}\r\n\r\n.simplepicker-calender thead th {\r\n font-weight: normal;\r\n font-size: 15px;\r\n padding-bottom: 6px;\r\n width: 14.28%;\r\n height: 30px;\r\n text-align: center;\r\n}\r\n\r\n.simplepicker-calender tbody td {\r\n position: relative;\r\n text-align: center;\r\n vertical-align: middle;\r\n padding: 12px;\r\n z-index: 1;\r\n}\r\n\r\n.simplepicker-calender tbody td::after {\r\n content: \" \";\r\n visibility: hidden;\r\n display: block;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n height: 35px;\r\n width: 35px;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.simplepicker-calender tbody td:hover::after {\r\n visibility: visible;\r\n}\r\n\r\n.simplepicker-calender tbody td:active,\r\n.simplepicker-calender tbody td.active {\r\n color: #fff;\r\n}\r\n\r\n.simplepicker-calender tbody td:active::after,\r\n.simplepicker-calender tbody .active::after {\r\n visibility: visible;\r\n background-color:teal;\r\n z-index: -1;\r\n}\r\n\r\n.simplepicker-calender tbody td[data-empty] {\r\n pointer-events: none;\r\n}\r\n\r\n.simplepicker-time-section {\r\n display: none;\r\n height: 120px;\r\n}\r\n\r\n.simplepicker-time-section input {\r\n box-sizing: border-box;\r\n width: 120px;\r\n height: 32px;\r\n max-width: 120px;\r\n max-height: 32px;\r\n padding: 4px 3px;\r\n border: none;\r\n border-bottom: 2px solid #ccc;\r\n font-size: 14px;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n display: block;\r\n margin: 25% auto;\r\n}\r\n\r\n.simplepicker-time-section input:focus {\r\n outline: none;\r\n border-bottom-color: teal;\r\n}\r\n\r\n.simplepicker-picker-section {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n.simplepicker-btn {\r\n border: none;\r\n background: transparent;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n font-size: 16px;\r\n padding: 7px 14px;\r\n border: 1px solid #ddd;\r\n margin: 0 5px;\r\n border-color: #016565;\r\n color: #016565;\r\n font-size: 13px;\r\n}\r\n\r\n.simplepicker-btn:hover, .simplepicker-btn:active {\r\n color: white;\r\n background-color: #016565;\r\n}\r\n\r\n.simplepicker-fade {\r\n color: rgba(225, 225, 225, 0.95);\r\n}\r\n\r\n.simplepicker-wrapper, .simplepicker-icon,\r\n.simplepicker-btn {\r\n cursor: pointer;\r\n}\r\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/simplepicker.js: -------------------------------------------------------------------------------- 1 | var SimplePicker=function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}({0:function(e,t,i){i("iyB0"),e.exports=i("TYVf")},"0DyV":function(e,t,i){"use strict";function n(e,t){e=[].concat(e);for(var i=0;i=12;return r&&n>12&&(n-=12),r||0!==n||(n=12),t+=n<10?"0"+n:n,t+=":"+i[1]+" ",t+=r?"PM":"AM"}},TYVf:function(e,t,i){"use strict";var n=i("0DyV"),r=i("ht6X"),s=["submit","close"],a=new Date,c=function(){function e(e,t){this._validOnListeners=s;var i=void 0,n=t;if("string"==typeof e){var r=document.querySelector(e);if(null===r)throw new Error("Invalid selector passed to SimplePicker!");i=r}else e instanceof HTMLElement?i=e:"object"==typeof e&&(n=e);i||(i=document.querySelector("body")),n||(n={}),this.selectedDate=new Date,this.injectTemplate(i),this.init(i,n),this.initListeners(),this._eventHandlers={}}return e.prototype.initElMethod=function(e){this.$=function(t){return e.querySelector(t)},this.$$=function(t){return e.querySelectorAll(t)}},e.prototype.init=function(e,t){this.$simplepickerWrapper=e.querySelector(".simplepicker-wrapper"),this.initElMethod(this.$simplepickerWrapper);var i=this.$,r=this.$$;this.$simplepicker=i(".simpilepicker-date-picker"),this.$trs=r(".simplepicker-calender tbody tr"),this.$tds=r(".simplepicker-calender tbody td"),this.$headerMonthAndYear=i(".simplepicker-month-and-year"),this.$monthAndYear=i(".simplepicker-selected-date"),this.$date=i(".simplepicker-date"),this.$day=i(".simplepicker-day-header"),this.$time=i(".simplepicker-time"),this.$timeInput=i(".simplepicker-time-section input"),this.$timeSectionIcon=i(".simplepicker-icon-time"),this.$cancel=i(".simplepicker-cancel-btn"),this.$ok=i(".simplepicker-ok-btn"),this.$displayDateElements=[this.$day,this.$headerMonthAndYear,this.$date],this.$time.classList.add("simplepicker-fade"),this.render(n.scrapeMonth(a)),t=t||{},this.opts=t,this.reset(t.selectedDate||a),void 0!==t.zIndex&&(this.$simplepickerWrapper.style.zIndex=t.zIndex.toString()),t.disableTimeSection&&this.disableTimeSection(),t.compactMode&&this.compactMode()},e.prototype.reset=function(e){var t=e||new Date;this.render(n.scrapeMonth(t));var i=t.toTimeString().split(" ")[0].replace(/\:\d\d$/,"");this.$timeInput.value=i,this.$time.innerText=n.formatTimeFromInputElement(i);var r=t.getDate().toString(),s=this.findElementWithDate(r);s.classList.contains("active")||(this.selectDateElement(s),this.updateDateComponents(t))},e.prototype.compactMode=function(){this.$date.style.display="none"},e.prototype.disableTimeSection=function(){this.$timeSectionIcon.style.visibility="hidden"},e.prototype.enableTimeSection=function(){this.$timeSectionIcon.style.visibility="visible"},e.prototype.injectTemplate=function(e){var t=document.createElement("template");t.innerHTML=r.htmlTemplate,e.appendChild(t.content.cloneNode(!0))},e.prototype.clearRows=function(){this.$tds.forEach(function(e){e.innerHTML="",e.classList.remove("active")})},e.prototype.updateDateComponents=function(e){var t=n.days[e.getDay()],i=n.months[e.getMonth()]+" "+e.getFullYear();this.$headerMonthAndYear.innerHTML=i,this.$monthAndYear.innerHTML=i,this.$day.innerHTML=t,this.$date.innerHTML=n.getDisplayDate(e)},e.prototype.render=function(e){var t=this.$$,i=this.$trs,n=e.month,r=e.date;this.clearRows(),n.forEach(function(e,t){var n=i[t].children;e.forEach(function(e,t){var i=n[t];e?(i.removeAttribute("data-empty"),i.innerHTML=e):i.setAttribute("data-empty","")})});var s=t("table tbody tr:last-child td"),a=!0;s.forEach(function(e){void 0===e.dataset.empty&&(a=!1)});var c=s[0].parentElement;c.style.display=a&&c?"none":"table-row",this.updateDateComponents(r)},e.prototype.updateSelectedDate=function(e){var t,i=this.$monthAndYear,r=this.$time;this.$date;t=e?e.innerHTML.trim():this.$date.innerHTML.replace(/[a-z]+/,"");var s=i.innerHTML.split(" "),a=s[0],c=s[1],o=n.months.indexOf(a),l=r.innerHTML.split(":"),p=+l[0],d=l[1].split(" "),m=d[0],u=d[1];"AM"===u&&12==p&&(p=0),"PM"===u&&p<12&&(p+=12);var h=new Date(+c,+o,+t,+p,+m);this.selectedDate=h;var v=t+" ";v+=i.innerHTML.trim()+" ",v+=r.innerHTML.trim(),this.readableDate=v.replace(/^\d+/,h.getDate().toString())},e.prototype.selectDateElement=function(e){var t=this.$(".simplepicker-calender tbody .active");e.classList.add("active"),t&&t.classList.remove("active"),this.updateSelectedDate(e),this.updateDateComponents(this.selectedDate)},e.prototype.findElementWithDate=function(e,t){var i,n;return void 0===t&&(t=!1),this.$tds.forEach(function(t){var r=t.innerHTML.trim();r===e&&(i=t),""!==r&&(n=t)}),void 0===i&&t&&(i=n),i},e.prototype.handleIconButtonClick=function(e){var t,i=this.$;if(e.classList.contains("simplepicker-icon-calender")){var r=i(".simplepicker-icon-time"),s=i(".simplepicker-time-section");return(c=i(".simplepicker-calender-section")).style.display="block",s.style.display="none",r.classList.remove("active"),e.classList.add("active"),void this.toogleDisplayFade()}if(e.classList.contains("simplepicker-icon-time")){var a=i(".simplepicker-icon-calender"),c=i(".simplepicker-calender-section");return(s=i(".simplepicker-time-section")).style.display="block",c.style.display="none",a.classList.remove("active"),e.classList.add("active"),void this.toogleDisplayFade()}var o=i(".simplepicker-calender td.active");if(o&&(t=o.innerHTML.trim()),e.classList.contains("simplepicker-icon-next")&&this.render(n.scrapeNextMonth()),e.classList.contains("simplepicker-icon-previous")&&this.render(n.scrapePreviousMonth()),t){var l=this.findElementWithDate(t,!0);this.selectDateElement(l)}},e.prototype.initListeners=function(){var e=this,t=e.$simplepicker,i=e.$timeInput,r=e.$ok,s=e.$cancel,a=e.$simplepickerWrapper,c=this;function o(){c.close(),c.callEvent("close",function(e){e()})}t.addEventListener("click",function(e){var t=e.target,i=t.tagName.toLowerCase();e.stopPropagation(),"td"!==i?"button"===i&&t.classList.contains("simplepicker-icon")&&c.handleIconButtonClick(t):c.selectDateElement(t)}),i.addEventListener("input",function(e){if(""!==e.target.value){var t=n.formatTimeFromInputElement(e.target.value);c.$time.innerHTML=t,c.updateSelectedDate()}}),r.addEventListener("click",function(){c.close(),c.callEvent("submit",function(e){e(c.selectedDate,c.readableDate)})}),s.addEventListener("click",o),a.addEventListener("click",o)},e.prototype.callEvent=function(e,t){(this._eventHandlers[e]||[]).forEach(function(e){t(e)})},e.prototype.open=function(){this.$simplepickerWrapper.classList.add("active")},e.prototype.close=function(){this.$simplepickerWrapper.classList.remove("active")},e.prototype.on=function(e,t){var i=this._validOnListeners,n=this._eventHandlers;if(!i.includes(e))throw new Error("Not a valid event!");n[e]=n[e]||[],n[e].push(t)},e.prototype.toogleDisplayFade=function(){this.$time.classList.toggle("simplepicker-fade"),this.$displayDateElements.forEach(function(e){e.classList.toggle("simplepicker-fade")})},e}();e.exports=c},ht6X:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.htmlTemplate='\n
\n
\n
\n
\n
\n
\n
\n \n
12:00 PM
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n \n \n \n \n \n '+function(e,t){for(var i="",n=1;n<=t;n++)i+=e;return i}("",6)+'\n \n
SunMonTueWedThuFriSat
\n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n
\n'},iyB0:function(e,t,i){}}); 2 | //# sourceMappingURL=simplepicker.js.map -------------------------------------------------------------------------------- /dist/simplepicker.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://SimplePicker/webpack/bootstrap","webpack://SimplePicker/./lib/date-util.ts","webpack://SimplePicker/./lib/index.ts","webpack://SimplePicker/./lib/template.ts"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","fill","arr","upto","concat","undefined","scrapeMonth","date","originalDate","Date","getTime","year","getFullYear","month","getMonth","data","monthTracker","current","setDate","years","tracker","rowTracker","_date","getDate","day","getDay","lastRow","lastRowLength","length","filled","months","days","scrapePreviousMonth","Error","setMonth","scrapeNextMonth","dateEndings","st","nd","rd","getDisplayDate","indexOf","formatTimeFromInputElement","input","timeString","_a","split","hour","isPM","dateUtil","template_1","validListeners","today","SimplePicker","arg1","arg2","this","_validOnListeners","el","opts","element","document","querySelector","HTMLElement","selectedDate","injectTemplate","init","initListeners","_eventHandlers","initElMethod","$","sel","$$","querySelectorAll","$simplepickerWrapper","$simplepicker","$trs","$tds","$headerMonthAndYear","$monthAndYear","$date","$day","$time","$timeInput","$timeSectionIcon","$cancel","$ok","$displayDateElements","classList","add","render","reset","zIndex","style","toString","disableTimeSection","compactMode","newDate","time","toTimeString","replace","innerText","dateString","$dateEl","findElementWithDate","contains","selectDateElement","updateDateComponents","display","visibility","enableTimeSection","$template","createElement","innerHTML","htmlTemplate","appendChild","content","cloneNode","clearRows","forEach","td","remove","monthAndYear","week","index","children","removeAttribute","setAttribute","$lastRowDates","lasRowIsEmpty","dataset","empty","$lastRow","parentElement","updateSelectedDate","trim","_b","monthName","timeComponents","hours","_c","minutes","meridium","readableDate","alreadyActive","returnLastIfNotFound","lastTd","handleIconButtonClick","baseClass","$timeIcon","$timeSection","$calenderSection","toogleDisplayFade","$calenderIcon","$active","$dateTd","_this","close","callEvent","f","addEventListener","e","target","tagName","toLowerCase","stopPropagation","formattedTime","func","event","dispatcher","open","on","handler","includes","push","toggle","$el","str","times","repeated","repeat"],"mappings":"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","file":"simplepicker.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n;\r\nexports.monthTracker = {\r\n years: {}\r\n};\r\nexports.months = [\r\n 'January',\r\n 'February',\r\n 'March',\r\n 'April',\r\n 'May',\r\n 'June',\r\n 'July',\r\n 'August',\r\n 'September',\r\n 'October',\r\n 'November',\r\n 'December'\r\n];\r\nexports.days = [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday'\r\n];\r\nfunction fill(arr, upto) {\r\n var temp = [];\r\n arr = temp.concat(arr);\r\n for (var i = 0; i < upto; i++) {\r\n arr[i] = undefined;\r\n }\r\n return arr;\r\n}\r\n// builds the calender for one month given a date\r\n// which is end, start or in middle of the month\r\nfunction scrapeMonth(date) {\r\n var originalDate = new Date(date.getTime());\r\n var year = date.getFullYear();\r\n var month = date.getMonth();\r\n var data = {\r\n date: originalDate,\r\n month: undefined\r\n };\r\n exports.monthTracker.current = new Date(date.getTime());\r\n exports.monthTracker.current.setDate(1);\r\n exports.monthTracker.years[year] = exports.monthTracker.years[year] || {};\r\n if (exports.monthTracker.years[year][month] !== undefined) {\r\n data.month = exports.monthTracker.years[year][month];\r\n return data;\r\n }\r\n date = new Date(date.getTime());\r\n date.setDate(1);\r\n exports.monthTracker.years[year][month] = [];\r\n var tracker = exports.monthTracker.years[year][month];\r\n var rowTracker = 0;\r\n while (date.getMonth() === month) {\r\n var _date = date.getDate();\r\n var day = date.getDay();\r\n if (_date === 1) {\r\n tracker[rowTracker] = fill([], day);\r\n }\r\n tracker[rowTracker] = tracker[rowTracker] || [];\r\n tracker[rowTracker][day] = _date;\r\n if (day === 6) {\r\n rowTracker++;\r\n }\r\n date.setDate(date.getDate() + 1);\r\n }\r\n var lastRow = 5;\r\n if (tracker[5] === undefined) {\r\n lastRow = 4;\r\n tracker[5] = fill([], 7);\r\n }\r\n var lastRowLength = tracker[lastRow].length;\r\n if (lastRowLength < 7) {\r\n var filled = tracker[lastRow].concat(fill([], 7 - lastRowLength));\r\n tracker[lastRow] = filled;\r\n }\r\n data.month = tracker;\r\n return data;\r\n}\r\nexports.scrapeMonth = scrapeMonth;\r\nfunction scrapePreviousMonth() {\r\n var date = exports.monthTracker.current;\r\n if (!date) {\r\n throw Error('scrapePrevoisMonth called without setting monthTracker.current!');\r\n }\r\n date.setMonth(date.getMonth() - 1);\r\n return scrapeMonth(date);\r\n}\r\nexports.scrapePreviousMonth = scrapePreviousMonth;\r\nfunction scrapeNextMonth() {\r\n var date = exports.monthTracker.current;\r\n if (!date) {\r\n throw Error('scrapePrevoisMonth called without setting monthTracker.current!');\r\n }\r\n date.setMonth(date.getMonth() + 1);\r\n return scrapeMonth(date);\r\n}\r\nexports.scrapeNextMonth = scrapeNextMonth;\r\nvar dateEndings = {\r\n st: [1, 21, 31],\r\n nd: [2, 22],\r\n rd: [3, 23]\r\n};\r\nfunction getDisplayDate(_date) {\r\n var date = _date.getDate();\r\n if (dateEndings.st.indexOf(date) !== -1) {\r\n return date + 'st';\r\n }\r\n if (dateEndings.nd.indexOf(date) !== -1) {\r\n return date + 'nd';\r\n }\r\n if (dateEndings.rd.indexOf(date) !== -1) {\r\n return date + 'rd';\r\n }\r\n return date + 'th';\r\n}\r\nexports.getDisplayDate = getDisplayDate;\r\nfunction formatTimeFromInputElement(input) {\r\n var timeString = '';\r\n var _a = input.split(':'), hour = _a[0], minute = _a[1];\r\n hour = +hour;\r\n var isPM = hour >= 12;\r\n if (isPM && hour > 12) {\r\n hour = hour - 12;\r\n }\r\n if (!isPM && hour === 0) {\r\n hour = 12;\r\n }\r\n timeString += hour < 10 ? '0' + hour : hour;\r\n timeString += ':' + minute + ' ';\r\n timeString += isPM ? 'PM' : 'AM';\r\n return timeString;\r\n}\r\nexports.formatTimeFromInputElement = formatTimeFromInputElement;\r\n","\"use strict\";\r\nvar dateUtil = require(\"./date-util\");\r\nvar template_1 = require(\"./template\");\r\nvar validListeners = [\r\n 'submit',\r\n 'close',\r\n];\r\nvar today = new Date();\r\nvar SimplePicker = /** @class */ (function () {\r\n function SimplePicker(arg1, arg2) {\r\n this._validOnListeners = validListeners;\r\n var el = undefined;\r\n var opts = arg2;\r\n if (typeof arg1 === 'string') {\r\n var element = document.querySelector(arg1);\r\n if (element !== null) {\r\n el = element;\r\n }\r\n else {\r\n throw new Error('Invalid selector passed to SimplePicker!');\r\n }\r\n }\r\n else if (arg1 instanceof HTMLElement) {\r\n el = arg1;\r\n }\r\n else if (typeof arg1 === 'object') {\r\n opts = arg1;\r\n }\r\n if (!el) {\r\n el = document.querySelector('body');\r\n }\r\n if (!opts) {\r\n opts = {};\r\n }\r\n this.selectedDate = new Date();\r\n this.injectTemplate(el);\r\n this.init(el, opts);\r\n this.initListeners();\r\n this._eventHandlers = {};\r\n }\r\n // We use $, $$ as helper method to conviently select\r\n // element we need for simplepicker.\r\n // Also, Limit the query to the wrapper class to avoid\r\n // selecting elements on the other instance.\r\n SimplePicker.prototype.initElMethod = function (el) {\r\n this.$ = function (sel) { return el.querySelector(sel); };\r\n this.$$ = function (sel) { return el.querySelectorAll(sel); };\r\n };\r\n SimplePicker.prototype.init = function (el, opts) {\r\n this.$simplepickerWrapper = el.querySelector('.simplepicker-wrapper');\r\n this.initElMethod(this.$simplepickerWrapper);\r\n var _a = this, $ = _a.$, $$ = _a.$$;\r\n this.$simplepicker = $('.simpilepicker-date-picker');\r\n this.$trs = $$('.simplepicker-calender tbody tr');\r\n this.$tds = $$('.simplepicker-calender tbody td');\r\n this.$headerMonthAndYear = $('.simplepicker-month-and-year');\r\n this.$monthAndYear = $('.simplepicker-selected-date');\r\n this.$date = $('.simplepicker-date');\r\n this.$day = $('.simplepicker-day-header');\r\n this.$time = $('.simplepicker-time');\r\n this.$timeInput = $('.simplepicker-time-section input');\r\n this.$timeSectionIcon = $('.simplepicker-icon-time');\r\n this.$cancel = $('.simplepicker-cancel-btn');\r\n this.$ok = $('.simplepicker-ok-btn');\r\n this.$displayDateElements = [\r\n this.$day,\r\n this.$headerMonthAndYear,\r\n this.$date\r\n ];\r\n this.$time.classList.add('simplepicker-fade');\r\n this.render(dateUtil.scrapeMonth(today));\r\n opts = opts || {};\r\n this.opts = opts;\r\n this.reset(opts.selectedDate || today);\r\n if (opts.zIndex !== undefined) {\r\n this.$simplepickerWrapper.style.zIndex = opts.zIndex.toString();\r\n }\r\n if (opts.disableTimeSection) {\r\n this.disableTimeSection();\r\n }\r\n if (opts.compactMode) {\r\n this.compactMode();\r\n }\r\n };\r\n // Reset by selecting current date.\r\n SimplePicker.prototype.reset = function (newDate) {\r\n var date = newDate || new Date();\r\n this.render(dateUtil.scrapeMonth(date));\r\n // The timeFull variable below will be formatted as HH:mm:ss.\r\n // Using regular experssion we remove the :ss parts.\r\n var timeFull = date.toTimeString().split(\" \")[0];\r\n var time = timeFull.replace(/\\:\\d\\d$/, \"\");\r\n this.$timeInput.value = time;\r\n this.$time.innerText = dateUtil.formatTimeFromInputElement(time);\r\n var dateString = date.getDate().toString();\r\n var $dateEl = this.findElementWithDate(dateString);\r\n if (!$dateEl.classList.contains('active')) {\r\n this.selectDateElement($dateEl);\r\n this.updateDateComponents(date);\r\n }\r\n };\r\n SimplePicker.prototype.compactMode = function () {\r\n var $date = this.$date;\r\n $date.style.display = 'none';\r\n };\r\n SimplePicker.prototype.disableTimeSection = function () {\r\n var $timeSectionIcon = this.$timeSectionIcon;\r\n $timeSectionIcon.style.visibility = 'hidden';\r\n };\r\n SimplePicker.prototype.enableTimeSection = function () {\r\n var $timeSectionIcon = this.$timeSectionIcon;\r\n $timeSectionIcon.style.visibility = 'visible';\r\n };\r\n SimplePicker.prototype.injectTemplate = function (el) {\r\n var $template = document.createElement('template');\r\n $template.innerHTML = template_1.htmlTemplate;\r\n el.appendChild($template.content.cloneNode(true));\r\n };\r\n SimplePicker.prototype.clearRows = function () {\r\n this.$tds.forEach(function (td) {\r\n td.innerHTML = '';\r\n td.classList.remove('active');\r\n });\r\n };\r\n SimplePicker.prototype.updateDateComponents = function (date) {\r\n var day = dateUtil.days[date.getDay()];\r\n var month = dateUtil.months[date.getMonth()];\r\n var year = date.getFullYear();\r\n var monthAndYear = month + ' ' + year;\r\n this.$headerMonthAndYear.innerHTML = monthAndYear;\r\n this.$monthAndYear.innerHTML = monthAndYear;\r\n this.$day.innerHTML = day;\r\n this.$date.innerHTML = dateUtil.getDisplayDate(date);\r\n };\r\n SimplePicker.prototype.render = function (data) {\r\n var _a = this, $$ = _a.$$, $trs = _a.$trs;\r\n var month = data.month, date = data.date;\r\n this.clearRows();\r\n month.forEach(function (week, index) {\r\n var $tds = $trs[index].children;\r\n week.forEach(function (day, index) {\r\n var td = $tds[index];\r\n if (!day) {\r\n td.setAttribute('data-empty', '');\r\n return;\r\n }\r\n td.removeAttribute('data-empty');\r\n td.innerHTML = day;\r\n });\r\n });\r\n var $lastRowDates = $$('table tbody tr:last-child td');\r\n var lasRowIsEmpty = true;\r\n $lastRowDates.forEach(function (date) {\r\n if (date.dataset.empty === undefined) {\r\n lasRowIsEmpty = false;\r\n }\r\n });\r\n // hide last row if it's empty to avoid\r\n // extra spacing due to last row\r\n var $lastRow = $lastRowDates[0].parentElement;\r\n if (lasRowIsEmpty && $lastRow) {\r\n $lastRow.style.display = 'none';\r\n }\r\n else {\r\n $lastRow.style.display = 'table-row';\r\n }\r\n this.updateDateComponents(date);\r\n };\r\n SimplePicker.prototype.updateSelectedDate = function (el) {\r\n var _a = this, $monthAndYear = _a.$monthAndYear, $time = _a.$time, $date = _a.$date;\r\n var day;\r\n if (el) {\r\n day = el.innerHTML.trim();\r\n }\r\n else {\r\n day = this.$date.innerHTML.replace(/[a-z]+/, '');\r\n }\r\n var _b = $monthAndYear.innerHTML.split(' '), monthName = _b[0], year = _b[1];\r\n var month = dateUtil.months.indexOf(monthName);\r\n var timeComponents = $time.innerHTML.split(':');\r\n var hours = +timeComponents[0];\r\n var _c = timeComponents[1].split(' '), minutes = _c[0], meridium = _c[1];\r\n if (meridium === 'AM' && hours == 12) {\r\n hours = 0;\r\n }\r\n if (meridium === 'PM' && hours < 12) {\r\n hours += 12;\r\n }\r\n var date = new Date(+year, +month, +day, +hours, +minutes);\r\n this.selectedDate = date;\r\n var _date = day + ' ';\r\n _date += $monthAndYear.innerHTML.trim() + ' ';\r\n _date += $time.innerHTML.trim();\r\n this.readableDate = _date.replace(/^\\d+/, date.getDate().toString());\r\n };\r\n SimplePicker.prototype.selectDateElement = function (el) {\r\n var alreadyActive = this.$('.simplepicker-calender tbody .active');\r\n el.classList.add('active');\r\n if (alreadyActive) {\r\n alreadyActive.classList.remove('active');\r\n }\r\n this.updateSelectedDate(el);\r\n this.updateDateComponents(this.selectedDate);\r\n };\r\n SimplePicker.prototype.findElementWithDate = function (date, returnLastIfNotFound) {\r\n if (returnLastIfNotFound === void 0) { returnLastIfNotFound = false; }\r\n var $tds = this.$tds;\r\n var el, lastTd;\r\n $tds.forEach(function (td) {\r\n var content = td.innerHTML.trim();\r\n if (content === date) {\r\n el = td;\r\n }\r\n if (content !== '') {\r\n lastTd = td;\r\n }\r\n });\r\n if (el === undefined && returnLastIfNotFound) {\r\n el = lastTd;\r\n }\r\n return el;\r\n };\r\n SimplePicker.prototype.handleIconButtonClick = function (el) {\r\n var $ = this.$;\r\n var baseClass = 'simplepicker-icon-';\r\n var nextIcon = baseClass + 'next';\r\n var previousIcon = baseClass + 'previous';\r\n var calenderIcon = baseClass + 'calender';\r\n var timeIcon = baseClass + 'time';\r\n if (el.classList.contains(calenderIcon)) {\r\n var $timeIcon = $('.' + timeIcon);\r\n var $timeSection = $('.simplepicker-time-section');\r\n var $calenderSection = $('.simplepicker-calender-section');\r\n $calenderSection.style.display = 'block';\r\n $timeSection.style.display = 'none';\r\n $timeIcon.classList.remove('active');\r\n el.classList.add('active');\r\n this.toogleDisplayFade();\r\n return;\r\n }\r\n if (el.classList.contains(timeIcon)) {\r\n var $calenderIcon = $('.' + calenderIcon);\r\n var $calenderSection = $('.simplepicker-calender-section');\r\n var $timeSection = $('.simplepicker-time-section');\r\n $timeSection.style.display = 'block';\r\n $calenderSection.style.display = 'none';\r\n $calenderIcon.classList.remove('active');\r\n el.classList.add('active');\r\n this.toogleDisplayFade();\r\n return;\r\n }\r\n var selectedDate;\r\n var $active = $('.simplepicker-calender td.active');\r\n if ($active) {\r\n selectedDate = $active.innerHTML.trim();\r\n }\r\n if (el.classList.contains(nextIcon)) {\r\n this.render(dateUtil.scrapeNextMonth());\r\n }\r\n if (el.classList.contains(previousIcon)) {\r\n this.render(dateUtil.scrapePreviousMonth());\r\n }\r\n if (selectedDate) {\r\n var $dateTd = this.findElementWithDate(selectedDate, true);\r\n this.selectDateElement($dateTd);\r\n }\r\n };\r\n SimplePicker.prototype.initListeners = function () {\r\n var _a = this, $simplepicker = _a.$simplepicker, $timeInput = _a.$timeInput, $ok = _a.$ok, $cancel = _a.$cancel, $simplepickerWrapper = _a.$simplepickerWrapper;\r\n var _this = this;\r\n $simplepicker.addEventListener('click', function (e) {\r\n var target = e.target;\r\n var tagName = target.tagName.toLowerCase();\r\n e.stopPropagation();\r\n if (tagName === 'td') {\r\n _this.selectDateElement(target);\r\n return;\r\n }\r\n if (tagName === 'button' &&\r\n target.classList.contains('simplepicker-icon')) {\r\n _this.handleIconButtonClick(target);\r\n return;\r\n }\r\n });\r\n $timeInput.addEventListener('input', function (e) {\r\n if (e.target.value === '') {\r\n return;\r\n }\r\n var formattedTime = dateUtil.formatTimeFromInputElement(e.target.value);\r\n _this.$time.innerHTML = formattedTime;\r\n _this.updateSelectedDate();\r\n });\r\n $ok.addEventListener('click', function () {\r\n _this.close();\r\n _this.callEvent('submit', function (func) {\r\n func(_this.selectedDate, _this.readableDate);\r\n });\r\n });\r\n function close() {\r\n _this.close();\r\n _this.callEvent('close', function (f) { f(); });\r\n }\r\n ;\r\n $cancel.addEventListener('click', close);\r\n $simplepickerWrapper.addEventListener('click', close);\r\n };\r\n SimplePicker.prototype.callEvent = function (event, dispatcher) {\r\n var listeners = this._eventHandlers[event] || [];\r\n listeners.forEach(function (func) {\r\n dispatcher(func);\r\n });\r\n };\r\n SimplePicker.prototype.open = function () {\r\n this.$simplepickerWrapper.classList.add('active');\r\n };\r\n // can be called by user or by click the cancel btn.\r\n SimplePicker.prototype.close = function () {\r\n this.$simplepickerWrapper.classList.remove('active');\r\n };\r\n SimplePicker.prototype.on = function (event, handler) {\r\n var _a = this, _validOnListeners = _a._validOnListeners, _eventHandlers = _a._eventHandlers;\r\n if (!_validOnListeners.includes(event)) {\r\n throw new Error('Not a valid event!');\r\n }\r\n _eventHandlers[event] = _eventHandlers[event] || [];\r\n _eventHandlers[event].push(handler);\r\n };\r\n SimplePicker.prototype.toogleDisplayFade = function () {\r\n this.$time.classList.toggle('simplepicker-fade');\r\n this.$displayDateElements.forEach(function ($el) {\r\n $el.classList.toggle('simplepicker-fade');\r\n });\r\n };\r\n return SimplePicker;\r\n}());\r\nmodule.exports = SimplePicker;\r\n","\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nfunction repeat(str, times) {\r\n var repeated = '';\r\n for (var i = 1; i <= times; i++) {\r\n repeated += str;\r\n }\r\n return repeated;\r\n}\r\nexports.htmlTemplate = \"\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n \\n
12:00 PM
\\n \\n
\\n
\\n
\\n
\\n
\\n \\n
\\n \\n
\\n
\\n \\n \\n \\n \\n \\n \" + repeat('', 6) + \"\\n \\n
SunMonTueWedThuFriSat
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n \\n \\n
\\n
\\n
\\n\";\r\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/simplepicker.node.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s="TYVf")}({"0DyV":function(e,t,i){"use strict";function n(e,t){e=[].concat(e);for(var i=0;i=12;return r&&n>12&&(n-=12),r||0!==n||(n=12),t+=n<10?"0"+n:n,t+=":"+i[1]+" ",t+=r?"PM":"AM"}},TYVf:function(e,t,i){"use strict";var n=i("0DyV"),r=i("ht6X"),s=["submit","close"],a=new Date,o=function(){function e(e,t){this._validOnListeners=s;var i=void 0,n=t;if("string"==typeof e){var r=document.querySelector(e);if(null===r)throw new Error("Invalid selector passed to SimplePicker!");i=r}else e instanceof HTMLElement?i=e:"object"==typeof e&&(n=e);i||(i=document.querySelector("body")),n||(n={}),this.selectedDate=new Date,this.injectTemplate(i),this.init(i,n),this.initListeners(),this._eventHandlers={}}return e.prototype.initElMethod=function(e){this.$=function(t){return e.querySelector(t)},this.$$=function(t){return e.querySelectorAll(t)}},e.prototype.init=function(e,t){this.$simplepickerWrapper=e.querySelector(".simplepicker-wrapper"),this.initElMethod(this.$simplepickerWrapper);var i=this.$,r=this.$$;this.$simplepicker=i(".simpilepicker-date-picker"),this.$trs=r(".simplepicker-calender tbody tr"),this.$tds=r(".simplepicker-calender tbody td"),this.$headerMonthAndYear=i(".simplepicker-month-and-year"),this.$monthAndYear=i(".simplepicker-selected-date"),this.$date=i(".simplepicker-date"),this.$day=i(".simplepicker-day-header"),this.$time=i(".simplepicker-time"),this.$timeInput=i(".simplepicker-time-section input"),this.$timeSectionIcon=i(".simplepicker-icon-time"),this.$cancel=i(".simplepicker-cancel-btn"),this.$ok=i(".simplepicker-ok-btn"),this.$displayDateElements=[this.$day,this.$headerMonthAndYear,this.$date],this.$time.classList.add("simplepicker-fade"),this.render(n.scrapeMonth(a)),t=t||{},this.opts=t,this.reset(t.selectedDate||a),void 0!==t.zIndex&&(this.$simplepickerWrapper.style.zIndex=t.zIndex.toString()),t.disableTimeSection&&this.disableTimeSection(),t.compactMode&&this.compactMode()},e.prototype.reset=function(e){var t=e||new Date;this.render(n.scrapeMonth(t));var i=t.toTimeString().split(" ")[0].replace(/\:\d\d$/,"");this.$timeInput.value=i,this.$time.innerText=n.formatTimeFromInputElement(i);var r=t.getDate().toString(),s=this.findElementWithDate(r);s.classList.contains("active")||(this.selectDateElement(s),this.updateDateComponents(t))},e.prototype.compactMode=function(){this.$date.style.display="none"},e.prototype.disableTimeSection=function(){this.$timeSectionIcon.style.visibility="hidden"},e.prototype.enableTimeSection=function(){this.$timeSectionIcon.style.visibility="visible"},e.prototype.injectTemplate=function(e){var t=document.createElement("template");t.innerHTML=r.htmlTemplate,e.appendChild(t.content.cloneNode(!0))},e.prototype.clearRows=function(){this.$tds.forEach(function(e){e.innerHTML="",e.classList.remove("active")})},e.prototype.updateDateComponents=function(e){var t=n.days[e.getDay()],i=n.months[e.getMonth()]+" "+e.getFullYear();this.$headerMonthAndYear.innerHTML=i,this.$monthAndYear.innerHTML=i,this.$day.innerHTML=t,this.$date.innerHTML=n.getDisplayDate(e)},e.prototype.render=function(e){var t=this.$$,i=this.$trs,n=e.month,r=e.date;this.clearRows(),n.forEach(function(e,t){var n=i[t].children;e.forEach(function(e,t){var i=n[t];e?(i.removeAttribute("data-empty"),i.innerHTML=e):i.setAttribute("data-empty","")})});var s=t("table tbody tr:last-child td"),a=!0;s.forEach(function(e){void 0===e.dataset.empty&&(a=!1)});var o=s[0].parentElement;o.style.display=a&&o?"none":"table-row",this.updateDateComponents(r)},e.prototype.updateSelectedDate=function(e){var t,i=this.$monthAndYear,r=this.$time;this.$date;t=e?e.innerHTML.trim():this.$date.innerHTML.replace(/[a-z]+/,"");var s=i.innerHTML.split(" "),a=s[0],o=s[1],c=n.months.indexOf(a),l=r.innerHTML.split(":"),p=+l[0],d=l[1].split(" "),m=d[0],h=d[1];"AM"===h&&12==p&&(p=0),"PM"===h&&p<12&&(p+=12);var u=new Date(+o,+c,+t,+p,+m);this.selectedDate=u;var v=t+" ";v+=i.innerHTML.trim()+" ",v+=r.innerHTML.trim(),this.readableDate=v.replace(/^\d+/,u.getDate().toString())},e.prototype.selectDateElement=function(e){var t=this.$(".simplepicker-calender tbody .active");e.classList.add("active"),t&&t.classList.remove("active"),this.updateSelectedDate(e),this.updateDateComponents(this.selectedDate)},e.prototype.findElementWithDate=function(e,t){var i,n;return void 0===t&&(t=!1),this.$tds.forEach(function(t){var r=t.innerHTML.trim();r===e&&(i=t),""!==r&&(n=t)}),void 0===i&&t&&(i=n),i},e.prototype.handleIconButtonClick=function(e){var t,i=this.$;if(e.classList.contains("simplepicker-icon-calender")){var r=i(".simplepicker-icon-time"),s=i(".simplepicker-time-section");return(o=i(".simplepicker-calender-section")).style.display="block",s.style.display="none",r.classList.remove("active"),e.classList.add("active"),void this.toogleDisplayFade()}if(e.classList.contains("simplepicker-icon-time")){var a=i(".simplepicker-icon-calender"),o=i(".simplepicker-calender-section");return(s=i(".simplepicker-time-section")).style.display="block",o.style.display="none",a.classList.remove("active"),e.classList.add("active"),void this.toogleDisplayFade()}var c=i(".simplepicker-calender td.active");if(c&&(t=c.innerHTML.trim()),e.classList.contains("simplepicker-icon-next")&&this.render(n.scrapeNextMonth()),e.classList.contains("simplepicker-icon-previous")&&this.render(n.scrapePreviousMonth()),t){var l=this.findElementWithDate(t,!0);this.selectDateElement(l)}},e.prototype.initListeners=function(){var e=this,t=e.$simplepicker,i=e.$timeInput,r=e.$ok,s=e.$cancel,a=e.$simplepickerWrapper,o=this;function c(){o.close(),o.callEvent("close",function(e){e()})}t.addEventListener("click",function(e){var t=e.target,i=t.tagName.toLowerCase();e.stopPropagation(),"td"!==i?"button"===i&&t.classList.contains("simplepicker-icon")&&o.handleIconButtonClick(t):o.selectDateElement(t)}),i.addEventListener("input",function(e){if(""!==e.target.value){var t=n.formatTimeFromInputElement(e.target.value);o.$time.innerHTML=t,o.updateSelectedDate()}}),r.addEventListener("click",function(){o.close(),o.callEvent("submit",function(e){e(o.selectedDate,o.readableDate)})}),s.addEventListener("click",c),a.addEventListener("click",c)},e.prototype.callEvent=function(e,t){(this._eventHandlers[e]||[]).forEach(function(e){t(e)})},e.prototype.open=function(){this.$simplepickerWrapper.classList.add("active")},e.prototype.close=function(){this.$simplepickerWrapper.classList.remove("active")},e.prototype.on=function(e,t){var i=this._validOnListeners,n=this._eventHandlers;if(!i.includes(e))throw new Error("Not a valid event!");n[e]=n[e]||[],n[e].push(t)},e.prototype.toogleDisplayFade=function(){this.$time.classList.toggle("simplepicker-fade"),this.$displayDateElements.forEach(function(e){e.classList.toggle("simplepicker-fade")})},e}();e.exports=o},ht6X:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.htmlTemplate='\n
\n
\n
\n
\n
\n
\n
\n \n
12:00 PM
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n \n \n \n \n \n '+function(e,t){for(var i="",n=1;n<=t;n++)i+=e;return i}("",6)+'\n \n
SunMonTueWedThuFriSat
\n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n
\n'}}); 2 | //# sourceMappingURL=simplepicker.node.js.map -------------------------------------------------------------------------------- /dist/simplepicker.node.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./lib/date-util.ts","webpack:///./lib/index.ts","webpack:///./lib/template.ts"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","fill","arr","upto","concat","undefined","scrapeMonth","date","originalDate","Date","getTime","year","getFullYear","month","getMonth","data","monthTracker","current","setDate","years","tracker","rowTracker","_date","getDate","day","getDay","lastRow","lastRowLength","length","filled","months","days","scrapePreviousMonth","Error","setMonth","scrapeNextMonth","dateEndings","st","nd","rd","getDisplayDate","indexOf","formatTimeFromInputElement","input","timeString","_a","split","hour","isPM","dateUtil","template_1","validListeners","today","SimplePicker","arg1","arg2","this","_validOnListeners","el","opts","element","document","querySelector","HTMLElement","selectedDate","injectTemplate","init","initListeners","_eventHandlers","initElMethod","$","sel","$$","querySelectorAll","$simplepickerWrapper","$simplepicker","$trs","$tds","$headerMonthAndYear","$monthAndYear","$date","$day","$time","$timeInput","$timeSectionIcon","$cancel","$ok","$displayDateElements","classList","add","render","reset","zIndex","style","toString","disableTimeSection","compactMode","newDate","time","toTimeString","replace","innerText","dateString","$dateEl","findElementWithDate","contains","selectDateElement","updateDateComponents","display","visibility","enableTimeSection","$template","createElement","innerHTML","htmlTemplate","appendChild","content","cloneNode","clearRows","forEach","td","remove","monthAndYear","week","index","children","removeAttribute","setAttribute","$lastRowDates","lasRowIsEmpty","dataset","empty","$lastRow","parentElement","updateSelectedDate","trim","_b","monthName","timeComponents","hours","_c","minutes","meridium","readableDate","alreadyActive","returnLastIfNotFound","lastTd","handleIconButtonClick","baseClass","$timeIcon","$timeSection","$calenderSection","toogleDisplayFade","$calenderIcon","$active","$dateTd","_this","close","callEvent","f","addEventListener","e","target","tagName","toLowerCase","stopPropagation","formattedTime","func","event","dispatcher","open","on","handler","includes","push","toggle","$el","str","times","repeated","repeat"],"mappings":"2BACA,IAAAA,EAAA,GAGA,SAAAC,EAAAC,GAGA,GAAAF,EAAAE,GACA,OAAAF,EAAAE,GAAAC,QAGA,IAAAC,EAAAJ,EAAAE,GAAA,CACAG,EAAAH,EACAI,GAAA,EACAH,QAAA,IAUA,OANAI,EAAAL,GAAAM,KAAAJ,EAAAD,QAAAC,IAAAD,QAAAF,GAGAG,EAAAE,GAAA,EAGAF,EAAAD,QA0DA,OArDAF,EAAAQ,EAAAF,EAGAN,EAAAS,EAAAV,EAGAC,EAAAU,EAAA,SAAAR,EAAAS,EAAAC,GACAZ,EAAAa,EAAAX,EAAAS,IACAG,OAAAC,eAAAb,EAAAS,EAAA,CAA0CK,YAAA,EAAAC,IAAAL,KAK1CZ,EAAAkB,EAAA,SAAAhB,GACA,oBAAAiB,eAAAC,aACAN,OAAAC,eAAAb,EAAAiB,OAAAC,YAAA,CAAwDC,MAAA,WAExDP,OAAAC,eAAAb,EAAA,cAAiDmB,OAAA,KAQjDrB,EAAAsB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAArB,EAAAqB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,iBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAX,OAAAY,OAAA,MAGA,GAFA1B,EAAAkB,EAAAO,GACAX,OAAAC,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAArB,EAAAU,EAAAe,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAzB,EAAA6B,EAAA,SAAA1B,GACA,IAAAS,EAAAT,KAAAqB,WACA,WAA2B,OAAArB,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAH,EAAAU,EAAAE,EAAA,IAAAA,GACAA,GAIAZ,EAAAa,EAAA,SAAAiB,EAAAC,GAAsD,OAAAjB,OAAAkB,UAAAC,eAAA1B,KAAAuB,EAAAC,IAGtD/B,EAAAkC,EAAA,GAIAlC,IAAAmC,EAAA,8CCrDA,SAAAC,EAAAC,EAAAC,GAEAD,EADA,GACAE,OAAAF,GACA,QAAAjC,EAAA,EAAmBA,EAAAkC,EAAUlC,IAC7BiC,EAAAjC,QAAAoC,EAEA,OAAAH,EAIA,SAAAI,EAAAC,GACA,IAAAC,EAAA,IAAAC,KAAAF,EAAAG,WACAC,EAAAJ,EAAAK,cACAC,EAAAN,EAAAO,WACAC,EAAA,CACAR,KAAAC,EACAK,WAAAR,GAKA,GAHAtC,EAAAiD,aAAAC,QAAA,IAAAR,KAAAF,EAAAG,WACA3C,EAAAiD,aAAAC,QAAAC,QAAA,GACAnD,EAAAiD,aAAAG,MAAAR,GAAA5C,EAAAiD,aAAAG,MAAAR,IAAA,QACAN,IAAAtC,EAAAiD,aAAAG,MAAAR,GAAAE,GAEA,OADAE,EAAAF,MAAA9C,EAAAiD,aAAAG,MAAAR,GAAAE,GACAE,GAEAR,EAAA,IAAAE,KAAAF,EAAAG,YACAQ,QAAA,GACAnD,EAAAiD,aAAAG,MAAAR,GAAAE,GAAA,GAGA,IAFA,IAAAO,EAAArD,EAAAiD,aAAAG,MAAAR,GAAAE,GACAQ,EAAA,EACAd,EAAAO,aAAAD,GAAA,CACA,IAAAS,EAAAf,EAAAgB,UACAC,EAAAjB,EAAAkB,SACA,IAAAH,IACAF,EAAAC,GAAApB,EAAA,GAAAuB,IAEAJ,EAAAC,GAAAD,EAAAC,IAAA,GACAD,EAAAC,GAAAG,GAAAF,EACA,IAAAE,GACAH,IAEAd,EAAAW,QAAAX,EAAAgB,UAAA,GAEA,IAAAG,EAAA,OACArB,IAAAe,EAAA,KACAM,EAAA,EACAN,EAAA,GAAAnB,EAAA,OAEA,IAAA0B,EAAAP,EAAAM,GAAAE,OACA,GAAAD,EAAA,GACA,IAAAE,EAAAT,EAAAM,GAAAtB,OAAAH,EAAA,KAAA0B,IACAP,EAAAM,GAAAG,EAGA,OADAd,EAAAF,MAAAO,EACAL,EAlFApC,OAAAC,eAAAb,EAAA,cAA8CmB,OAAA,IAE9CnB,EAAAiD,aAAA,CACAG,MAAA,IAEApD,EAAA+D,OAAA,CACA,UACA,WACA,QACA,QACA,MACA,OACA,OACA,SACA,YACA,UACA,WACA,YAEA/D,EAAAgE,KAAA,CACA,SACA,SACA,UACA,YACA,WACA,SACA,YA0DAhE,EAAAuC,cASAvC,EAAAiE,oBARA,WACA,IAAAzB,EAAAxC,EAAAiD,aAAAC,QACA,IAAAV,EACA,MAAA0B,MAAA,mEAGA,OADA1B,EAAA2B,SAAA3B,EAAAO,WAAA,GACAR,EAAAC,IAWAxC,EAAAoE,gBARA,WACA,IAAA5B,EAAAxC,EAAAiD,aAAAC,QACA,IAAAV,EACA,MAAA0B,MAAA,mEAGA,OADA1B,EAAA2B,SAAA3B,EAAAO,WAAA,GACAR,EAAAC,IAGA,IAAA6B,EAAA,CACAC,GAAA,UACAC,GAAA,OACAC,GAAA,QAeAxE,EAAAyE,eAbA,SAAAlB,GACA,IAAAf,EAAAe,EAAAC,UACA,WAAAa,EAAAC,GAAAI,QAAAlC,GACAA,EAAA,MAEA,IAAA6B,EAAAE,GAAAG,QAAAlC,GACAA,EAAA,MAEA,IAAA6B,EAAAG,GAAAE,QAAAlC,GACAA,EAAA,KAEAA,EAAA,MAmBAxC,EAAA2E,2BAhBA,SAAAC,GACA,IAAAC,EAAA,GACAC,EAAAF,EAAAG,MAAA,KAAAC,EAAAF,EAAA,GAEAG,GADAD,OACA,GAUA,OATAC,GAAAD,EAAA,KACAA,GAAA,IAEAC,GAAA,IAAAD,IACAA,EAAA,IAEAH,GAAAG,EAAA,OAAAA,IACAH,GAAA,IAVAC,EAAA,GAUA,IACAD,GAAAI,EAAA,8CCvIA,IAAAC,EAAepF,EAAQ,QACvBqF,EAAiBrF,EAAQ,QACzBsF,EAAA,CACA,SACA,SAEAC,EAAA,IAAA3C,KACA4C,EAAA,WACA,SAAAA,EAAAC,EAAAC,GACAC,KAAAC,kBAAAN,EACA,IAAAO,OAAArD,EACAsD,EAAAJ,EACA,oBAAAD,EAAA,CACA,IAAAM,EAAAC,SAAAC,cAAAR,GACA,UAAAM,EAIA,UAAA3B,MAAA,4CAHAyB,EAAAE,OAMAN,aAAAS,YACAL,EAAAJ,EAEA,iBAAAA,IACAK,EAAAL,GAEAI,IACAA,EAAAG,SAAAC,cAAA,SAEAH,IACAA,EAAA,IAEAH,KAAAQ,aAAA,IAAAvD,KACA+C,KAAAS,eAAAP,GACAF,KAAAU,KAAAR,EAAAC,GACAH,KAAAW,gBACAX,KAAAY,eAAA,GAuSA,OAjSAf,EAAAxD,UAAAwE,aAAA,SAAAX,GACAF,KAAAc,EAAA,SAAAC,GAAiC,OAAAb,EAAAI,cAAAS,IACjCf,KAAAgB,GAAA,SAAAD,GAAkC,OAAAb,EAAAe,iBAAAF,KAElClB,EAAAxD,UAAAqE,KAAA,SAAAR,EAAAC,GACAH,KAAAkB,qBAAAhB,EAAAI,cAAA,yBACAN,KAAAa,aAAAb,KAAAkB,sBACA,IAAAJ,EAAAd,KAAAc,EAAAE,EAAAhB,KAAAgB,GACAhB,KAAAmB,cAAAL,EAAA,8BACAd,KAAAoB,KAAAJ,EAAA,mCACAhB,KAAAqB,KAAAL,EAAA,mCACAhB,KAAAsB,oBAAAR,EAAA,gCACAd,KAAAuB,cAAAT,EAAA,+BACAd,KAAAwB,MAAAV,EAAA,sBACAd,KAAAyB,KAAAX,EAAA,4BACAd,KAAA0B,MAAAZ,EAAA,sBACAd,KAAA2B,WAAAb,EAAA,oCACAd,KAAA4B,iBAAAd,EAAA,2BACAd,KAAA6B,QAAAf,EAAA,4BACAd,KAAA8B,IAAAhB,EAAA,wBACAd,KAAA+B,qBAAA,CACA/B,KAAAyB,KACAzB,KAAAsB,oBACAtB,KAAAwB,OAEAxB,KAAA0B,MAAAM,UAAAC,IAAA,qBACAjC,KAAAkC,OAAAzC,EAAA3C,YAAA8C,IACAO,KAAA,GACAH,KAAAG,OACAH,KAAAmC,MAAAhC,EAAAK,cAAAZ,QACA/C,IAAAsD,EAAAiC,SACApC,KAAAkB,qBAAAmB,MAAAD,OAAAjC,EAAAiC,OAAAE,YAEAnC,EAAAoC,oBACAvC,KAAAuC,qBAEApC,EAAAqC,aACAxC,KAAAwC,eAIA3C,EAAAxD,UAAA8F,MAAA,SAAAM,GACA,IAAA1F,EAAA0F,GAAA,IAAAxF,KACA+C,KAAAkC,OAAAzC,EAAA3C,YAAAC,IAGA,IACA2F,EADA3F,EAAA4F,eAAArD,MAAA,QACAsD,QAAA,cACA5C,KAAA2B,WAAAjG,MAAAgH,EACA1C,KAAA0B,MAAAmB,UAAApD,EAAAP,2BAAAwD,GACA,IAAAI,EAAA/F,EAAAgB,UAAAuE,WACAS,EAAA/C,KAAAgD,oBAAAF,GACAC,EAAAf,UAAAiB,SAAA,YACAjD,KAAAkD,kBAAAH,GACA/C,KAAAmD,qBAAApG,KAGA8C,EAAAxD,UAAAmG,YAAA,WACAxC,KAAAwB,MACAa,MAAAe,QAAA,QAEAvD,EAAAxD,UAAAkG,mBAAA,WACAvC,KAAA4B,iBACAS,MAAAgB,WAAA,UAEAxD,EAAAxD,UAAAiH,kBAAA,WACAtD,KAAA4B,iBACAS,MAAAgB,WAAA,WAEAxD,EAAAxD,UAAAoE,eAAA,SAAAP,GACA,IAAAqD,EAAAlD,SAAAmD,cAAA,YACAD,EAAAE,UAAA/D,EAAAgE,aACAxD,EAAAyD,YAAAJ,EAAAK,QAAAC,WAAA,KAEAhE,EAAAxD,UAAAyH,UAAA,WACA9D,KAAAqB,KAAA0C,QAAA,SAAAC,GACAA,EAAAP,UAAA,GACAO,EAAAhC,UAAAiC,OAAA,aAGApE,EAAAxD,UAAA8G,qBAAA,SAAApG,GACA,IAAAiB,EAAAyB,EAAAlB,KAAAxB,EAAAkB,UAGAiG,EAFAzE,EAAAnB,OAAAvB,EAAAO,YAEA,IADAP,EAAAK,cAEA4C,KAAAsB,oBAAAmC,UAAAS,EACAlE,KAAAuB,cAAAkC,UAAAS,EACAlE,KAAAyB,KAAAgC,UAAAzF,EACAgC,KAAAwB,MAAAiC,UAAAhE,EAAAT,eAAAjC,IAEA8C,EAAAxD,UAAA6F,OAAA,SAAA3E,GACA,IAAAyD,EAAAhB,KAAAgB,GAAAI,EAAApB,KAAAoB,KACA/D,EAAAE,EAAAF,MAAAN,EAAAQ,EAAAR,KACAiD,KAAA8D,YACAzG,EAAA0G,QAAA,SAAAI,EAAAC,GACA,IAAA/C,EAAAD,EAAAgD,GAAAC,SACAF,EAAAJ,QAAA,SAAA/F,EAAAoG,GACA,IAAAJ,EAAA3C,EAAA+C,GACApG,GAIAgG,EAAAM,gBAAA,cACAN,EAAAP,UAAAzF,GAJAgG,EAAAO,aAAA,qBAOA,IAAAC,EAAAxD,EAAA,gCACAyD,GAAA,EACAD,EAAAT,QAAA,SAAAhH,QACAF,IAAAE,EAAA2H,QAAAC,QACAF,GAAA,KAKA,IAAAG,EAAAJ,EAAA,GAAAK,cAEAD,EAAAvC,MAAAe,QADAqB,GAAAG,EACA,OAGA,YAEA5E,KAAAmD,qBAAApG,IAEA8C,EAAAxD,UAAAyI,mBAAA,SAAA5E,GACA,IACAlC,EADAuD,EAAAvB,KAAAuB,cAAAG,EAAA1B,KAAA0B,MAAA1B,KAAAwB,MAGAxD,EADAkC,EACAA,EAAAuD,UAAAsB,OAGA/E,KAAAwB,MAAAiC,UAAAb,QAAA,aAEA,IAAAoC,EAAAzD,EAAAkC,UAAAnE,MAAA,KAAA2F,EAAAD,EAAA,GAAA7H,EAAA6H,EAAA,GACA3H,EAAAoC,EAAAnB,OAAAW,QAAAgG,GACAC,EAAAxD,EAAA+B,UAAAnE,MAAA,KACA6F,GAAAD,EAAA,GACAE,EAAAF,EAAA,GAAA5F,MAAA,KAAA+F,EAAAD,EAAA,GAAAE,EAAAF,EAAA,GACA,OAAAE,GAAA,IAAAH,IACAA,EAAA,GAEA,OAAAG,GAAAH,EAAA,KACAA,GAAA,IAEA,IAAApI,EAAA,IAAAE,MAAAE,GAAAE,GAAAW,GAAAmH,GAAAE,GACArF,KAAAQ,aAAAzD,EACA,IAAAe,EAAAE,EAAA,IACAF,GAAAyD,EAAAkC,UAAAsB,OAAA,IACAjH,GAAA4D,EAAA+B,UAAAsB,OACA/E,KAAAuF,aAAAzH,EAAA8E,QAAA,OAAA7F,EAAAgB,UAAAuE,aAEAzC,EAAAxD,UAAA6G,kBAAA,SAAAhD,GACA,IAAAsF,EAAAxF,KAAAc,EAAA,wCACAZ,EAAA8B,UAAAC,IAAA,UACAuD,GACAA,EAAAxD,UAAAiC,OAAA,UAEAjE,KAAA8E,mBAAA5E,GACAF,KAAAmD,qBAAAnD,KAAAQ,eAEAX,EAAAxD,UAAA2G,oBAAA,SAAAjG,EAAA0I,GAEA,IACAvF,EAAAwF,EAaA,YAfA,IAAAD,IAA8CA,GAAA,GAC9CzF,KAAAqB,KAEA0C,QAAA,SAAAC,GACA,IAAAJ,EAAAI,EAAAP,UAAAsB,OACAnB,IAAA7G,IACAmD,EAAA8D,GAEA,KAAAJ,IACA8B,EAAA1B,UAGAnH,IAAAqD,GAAAuF,IACAvF,EAAAwF,GAEAxF,GAEAL,EAAAxD,UAAAsJ,sBAAA,SAAAzF,GACA,IA4BAM,EA5BAM,EAAAd,KAAAc,EAMA,GAAAZ,EAAA8B,UAAAiB,SAFA2C,8BAEA,CACA,IAAAC,EAAA/E,EAAA,2BACAgF,EAAAhF,EAAA,8BAOA,OANAiF,EAAAjF,EAAA,mCACAuB,MAAAe,QAAA,QACA0C,EAAAzD,MAAAe,QAAA,OACAyC,EAAA7D,UAAAiC,OAAA,UACA/D,EAAA8B,UAAAC,IAAA,eACAjC,KAAAgG,oBAGA,GAAA9F,EAAA8B,UAAAiB,SAZA2C,0BAYA,CACA,IAAAK,EAAAnF,EAAA,+BACAiF,EAAAjF,EAAA,kCAOA,OANAgF,EAAAhF,EAAA,+BACAuB,MAAAe,QAAA,QACA2C,EAAA1D,MAAAe,QAAA,OACA6C,EAAAjE,UAAAiC,OAAA,UACA/D,EAAA8B,UAAAC,IAAA,eACAjC,KAAAgG,oBAIA,IAAAE,EAAApF,EAAA,oCAUA,GATAoF,IACA1F,EAAA0F,EAAAzC,UAAAsB,QAEA7E,EAAA8B,UAAAiB,SA/BA2C,2BAgCA5F,KAAAkC,OAAAzC,EAAAd,mBAEAuB,EAAA8B,UAAAiB,SAjCA2C,+BAkCA5F,KAAAkC,OAAAzC,EAAAjB,uBAEAgC,EAAA,CACA,IAAA2F,EAAAnG,KAAAgD,oBAAAxC,GAAA,GACAR,KAAAkD,kBAAAiD,KAGAtG,EAAAxD,UAAAsE,cAAA,WACA,IAAAtB,EAAAW,KAAAmB,EAAA9B,EAAA8B,cAAAQ,EAAAtC,EAAAsC,WAAAG,EAAAzC,EAAAyC,IAAAD,EAAAxC,EAAAwC,QAAAX,EAAA7B,EAAA6B,qBACAkF,EAAApG,KA6BA,SAAAqG,IACAD,EAAAC,QACAD,EAAAE,UAAA,iBAAAC,GAAmDA,MA9BnDpF,EAAAqF,iBAAA,iBAAAC,GACA,IAAAC,EAAAD,EAAAC,OACAC,EAAAD,EAAAC,QAAAC,cACAH,EAAAI,kBACA,OAAAF,EAIA,WAAAA,GACAD,EAAA1E,UAAAiB,SAAA,sBACAmD,EAAAT,sBAAAe,GALAN,EAAAlD,kBAAAwD,KASA/E,EAAA6E,iBAAA,iBAAAC,GACA,QAAAA,EAAAC,OAAAhL,MAAA,CAGA,IAAAoL,EAAArH,EAAAP,2BAAAuH,EAAAC,OAAAhL,OACA0K,EAAA1E,MAAA+B,UAAAqD,EACAV,EAAAtB,wBAEAhD,EAAA0E,iBAAA,mBACAJ,EAAAC,QACAD,EAAAE,UAAA,kBAAAS,GACAA,EAAAX,EAAA5F,aAAA4F,EAAAb,kBAQA1D,EAAA2E,iBAAA,QAAAH,GACAnF,EAAAsF,iBAAA,QAAAH,IAEAxG,EAAAxD,UAAAiK,UAAA,SAAAU,EAAAC,IACAjH,KAAAY,eAAAoG,IAAA,IACAjD,QAAA,SAAAgD,GACAE,EAAAF,MAGAlH,EAAAxD,UAAA6K,KAAA,WACAlH,KAAAkB,qBAAAc,UAAAC,IAAA,WAGApC,EAAAxD,UAAAgK,MAAA,WACArG,KAAAkB,qBAAAc,UAAAiC,OAAA,WAEApE,EAAAxD,UAAA8K,GAAA,SAAAH,EAAAI,GACA,IAAAnH,EAAAD,KAAAC,kBAAAW,EAAAZ,KAAAY,eACA,IAAAX,EAAAoH,SAAAL,GACA,UAAAvI,MAAA,sBAEAmC,EAAAoG,GAAApG,EAAAoG,IAAA,GACApG,EAAAoG,GAAAM,KAAAF,IAEAvH,EAAAxD,UAAA2J,kBAAA,WACAhG,KAAA0B,MAAAM,UAAAuF,OAAA,qBACAvH,KAAA+B,qBAAAgC,QAAA,SAAAyD,GACAA,EAAAxF,UAAAuF,OAAA,wBAGA1H,EArUA,GAuUArF,EAAAD,QAAAsF,qCC9UA1E,OAAAC,eAAAb,EAAA,cAA8CmB,OAAA,IAQ9CnB,EAAAmJ,aAAA,gzCAPA,SAAA+D,EAAAC,GAEA,IADA,IAAAC,EAAA,GACAlN,EAAA,EAAmBA,GAAAiN,EAAYjN,IAC/BkN,GAAAF,EAEA,OAAAE,EAEAC,CAAA","file":"simplepicker.node.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"TYVf\");\n","\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\n;\r\nexports.monthTracker = {\r\n years: {}\r\n};\r\nexports.months = [\r\n 'January',\r\n 'February',\r\n 'March',\r\n 'April',\r\n 'May',\r\n 'June',\r\n 'July',\r\n 'August',\r\n 'September',\r\n 'October',\r\n 'November',\r\n 'December'\r\n];\r\nexports.days = [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday'\r\n];\r\nfunction fill(arr, upto) {\r\n var temp = [];\r\n arr = temp.concat(arr);\r\n for (var i = 0; i < upto; i++) {\r\n arr[i] = undefined;\r\n }\r\n return arr;\r\n}\r\n// builds the calender for one month given a date\r\n// which is end, start or in middle of the month\r\nfunction scrapeMonth(date) {\r\n var originalDate = new Date(date.getTime());\r\n var year = date.getFullYear();\r\n var month = date.getMonth();\r\n var data = {\r\n date: originalDate,\r\n month: undefined\r\n };\r\n exports.monthTracker.current = new Date(date.getTime());\r\n exports.monthTracker.current.setDate(1);\r\n exports.monthTracker.years[year] = exports.monthTracker.years[year] || {};\r\n if (exports.monthTracker.years[year][month] !== undefined) {\r\n data.month = exports.monthTracker.years[year][month];\r\n return data;\r\n }\r\n date = new Date(date.getTime());\r\n date.setDate(1);\r\n exports.monthTracker.years[year][month] = [];\r\n var tracker = exports.monthTracker.years[year][month];\r\n var rowTracker = 0;\r\n while (date.getMonth() === month) {\r\n var _date = date.getDate();\r\n var day = date.getDay();\r\n if (_date === 1) {\r\n tracker[rowTracker] = fill([], day);\r\n }\r\n tracker[rowTracker] = tracker[rowTracker] || [];\r\n tracker[rowTracker][day] = _date;\r\n if (day === 6) {\r\n rowTracker++;\r\n }\r\n date.setDate(date.getDate() + 1);\r\n }\r\n var lastRow = 5;\r\n if (tracker[5] === undefined) {\r\n lastRow = 4;\r\n tracker[5] = fill([], 7);\r\n }\r\n var lastRowLength = tracker[lastRow].length;\r\n if (lastRowLength < 7) {\r\n var filled = tracker[lastRow].concat(fill([], 7 - lastRowLength));\r\n tracker[lastRow] = filled;\r\n }\r\n data.month = tracker;\r\n return data;\r\n}\r\nexports.scrapeMonth = scrapeMonth;\r\nfunction scrapePreviousMonth() {\r\n var date = exports.monthTracker.current;\r\n if (!date) {\r\n throw Error('scrapePrevoisMonth called without setting monthTracker.current!');\r\n }\r\n date.setMonth(date.getMonth() - 1);\r\n return scrapeMonth(date);\r\n}\r\nexports.scrapePreviousMonth = scrapePreviousMonth;\r\nfunction scrapeNextMonth() {\r\n var date = exports.monthTracker.current;\r\n if (!date) {\r\n throw Error('scrapePrevoisMonth called without setting monthTracker.current!');\r\n }\r\n date.setMonth(date.getMonth() + 1);\r\n return scrapeMonth(date);\r\n}\r\nexports.scrapeNextMonth = scrapeNextMonth;\r\nvar dateEndings = {\r\n st: [1, 21, 31],\r\n nd: [2, 22],\r\n rd: [3, 23]\r\n};\r\nfunction getDisplayDate(_date) {\r\n var date = _date.getDate();\r\n if (dateEndings.st.indexOf(date) !== -1) {\r\n return date + 'st';\r\n }\r\n if (dateEndings.nd.indexOf(date) !== -1) {\r\n return date + 'nd';\r\n }\r\n if (dateEndings.rd.indexOf(date) !== -1) {\r\n return date + 'rd';\r\n }\r\n return date + 'th';\r\n}\r\nexports.getDisplayDate = getDisplayDate;\r\nfunction formatTimeFromInputElement(input) {\r\n var timeString = '';\r\n var _a = input.split(':'), hour = _a[0], minute = _a[1];\r\n hour = +hour;\r\n var isPM = hour >= 12;\r\n if (isPM && hour > 12) {\r\n hour = hour - 12;\r\n }\r\n if (!isPM && hour === 0) {\r\n hour = 12;\r\n }\r\n timeString += hour < 10 ? '0' + hour : hour;\r\n timeString += ':' + minute + ' ';\r\n timeString += isPM ? 'PM' : 'AM';\r\n return timeString;\r\n}\r\nexports.formatTimeFromInputElement = formatTimeFromInputElement;\r\n","\"use strict\";\r\nvar dateUtil = require(\"./date-util\");\r\nvar template_1 = require(\"./template\");\r\nvar validListeners = [\r\n 'submit',\r\n 'close',\r\n];\r\nvar today = new Date();\r\nvar SimplePicker = /** @class */ (function () {\r\n function SimplePicker(arg1, arg2) {\r\n this._validOnListeners = validListeners;\r\n var el = undefined;\r\n var opts = arg2;\r\n if (typeof arg1 === 'string') {\r\n var element = document.querySelector(arg1);\r\n if (element !== null) {\r\n el = element;\r\n }\r\n else {\r\n throw new Error('Invalid selector passed to SimplePicker!');\r\n }\r\n }\r\n else if (arg1 instanceof HTMLElement) {\r\n el = arg1;\r\n }\r\n else if (typeof arg1 === 'object') {\r\n opts = arg1;\r\n }\r\n if (!el) {\r\n el = document.querySelector('body');\r\n }\r\n if (!opts) {\r\n opts = {};\r\n }\r\n this.selectedDate = new Date();\r\n this.injectTemplate(el);\r\n this.init(el, opts);\r\n this.initListeners();\r\n this._eventHandlers = {};\r\n }\r\n // We use $, $$ as helper method to conviently select\r\n // element we need for simplepicker.\r\n // Also, Limit the query to the wrapper class to avoid\r\n // selecting elements on the other instance.\r\n SimplePicker.prototype.initElMethod = function (el) {\r\n this.$ = function (sel) { return el.querySelector(sel); };\r\n this.$$ = function (sel) { return el.querySelectorAll(sel); };\r\n };\r\n SimplePicker.prototype.init = function (el, opts) {\r\n this.$simplepickerWrapper = el.querySelector('.simplepicker-wrapper');\r\n this.initElMethod(this.$simplepickerWrapper);\r\n var _a = this, $ = _a.$, $$ = _a.$$;\r\n this.$simplepicker = $('.simpilepicker-date-picker');\r\n this.$trs = $$('.simplepicker-calender tbody tr');\r\n this.$tds = $$('.simplepicker-calender tbody td');\r\n this.$headerMonthAndYear = $('.simplepicker-month-and-year');\r\n this.$monthAndYear = $('.simplepicker-selected-date');\r\n this.$date = $('.simplepicker-date');\r\n this.$day = $('.simplepicker-day-header');\r\n this.$time = $('.simplepicker-time');\r\n this.$timeInput = $('.simplepicker-time-section input');\r\n this.$timeSectionIcon = $('.simplepicker-icon-time');\r\n this.$cancel = $('.simplepicker-cancel-btn');\r\n this.$ok = $('.simplepicker-ok-btn');\r\n this.$displayDateElements = [\r\n this.$day,\r\n this.$headerMonthAndYear,\r\n this.$date\r\n ];\r\n this.$time.classList.add('simplepicker-fade');\r\n this.render(dateUtil.scrapeMonth(today));\r\n opts = opts || {};\r\n this.opts = opts;\r\n this.reset(opts.selectedDate || today);\r\n if (opts.zIndex !== undefined) {\r\n this.$simplepickerWrapper.style.zIndex = opts.zIndex.toString();\r\n }\r\n if (opts.disableTimeSection) {\r\n this.disableTimeSection();\r\n }\r\n if (opts.compactMode) {\r\n this.compactMode();\r\n }\r\n };\r\n // Reset by selecting current date.\r\n SimplePicker.prototype.reset = function (newDate) {\r\n var date = newDate || new Date();\r\n this.render(dateUtil.scrapeMonth(date));\r\n // The timeFull variable below will be formatted as HH:mm:ss.\r\n // Using regular experssion we remove the :ss parts.\r\n var timeFull = date.toTimeString().split(\" \")[0];\r\n var time = timeFull.replace(/\\:\\d\\d$/, \"\");\r\n this.$timeInput.value = time;\r\n this.$time.innerText = dateUtil.formatTimeFromInputElement(time);\r\n var dateString = date.getDate().toString();\r\n var $dateEl = this.findElementWithDate(dateString);\r\n if (!$dateEl.classList.contains('active')) {\r\n this.selectDateElement($dateEl);\r\n this.updateDateComponents(date);\r\n }\r\n };\r\n SimplePicker.prototype.compactMode = function () {\r\n var $date = this.$date;\r\n $date.style.display = 'none';\r\n };\r\n SimplePicker.prototype.disableTimeSection = function () {\r\n var $timeSectionIcon = this.$timeSectionIcon;\r\n $timeSectionIcon.style.visibility = 'hidden';\r\n };\r\n SimplePicker.prototype.enableTimeSection = function () {\r\n var $timeSectionIcon = this.$timeSectionIcon;\r\n $timeSectionIcon.style.visibility = 'visible';\r\n };\r\n SimplePicker.prototype.injectTemplate = function (el) {\r\n var $template = document.createElement('template');\r\n $template.innerHTML = template_1.htmlTemplate;\r\n el.appendChild($template.content.cloneNode(true));\r\n };\r\n SimplePicker.prototype.clearRows = function () {\r\n this.$tds.forEach(function (td) {\r\n td.innerHTML = '';\r\n td.classList.remove('active');\r\n });\r\n };\r\n SimplePicker.prototype.updateDateComponents = function (date) {\r\n var day = dateUtil.days[date.getDay()];\r\n var month = dateUtil.months[date.getMonth()];\r\n var year = date.getFullYear();\r\n var monthAndYear = month + ' ' + year;\r\n this.$headerMonthAndYear.innerHTML = monthAndYear;\r\n this.$monthAndYear.innerHTML = monthAndYear;\r\n this.$day.innerHTML = day;\r\n this.$date.innerHTML = dateUtil.getDisplayDate(date);\r\n };\r\n SimplePicker.prototype.render = function (data) {\r\n var _a = this, $$ = _a.$$, $trs = _a.$trs;\r\n var month = data.month, date = data.date;\r\n this.clearRows();\r\n month.forEach(function (week, index) {\r\n var $tds = $trs[index].children;\r\n week.forEach(function (day, index) {\r\n var td = $tds[index];\r\n if (!day) {\r\n td.setAttribute('data-empty', '');\r\n return;\r\n }\r\n td.removeAttribute('data-empty');\r\n td.innerHTML = day;\r\n });\r\n });\r\n var $lastRowDates = $$('table tbody tr:last-child td');\r\n var lasRowIsEmpty = true;\r\n $lastRowDates.forEach(function (date) {\r\n if (date.dataset.empty === undefined) {\r\n lasRowIsEmpty = false;\r\n }\r\n });\r\n // hide last row if it's empty to avoid\r\n // extra spacing due to last row\r\n var $lastRow = $lastRowDates[0].parentElement;\r\n if (lasRowIsEmpty && $lastRow) {\r\n $lastRow.style.display = 'none';\r\n }\r\n else {\r\n $lastRow.style.display = 'table-row';\r\n }\r\n this.updateDateComponents(date);\r\n };\r\n SimplePicker.prototype.updateSelectedDate = function (el) {\r\n var _a = this, $monthAndYear = _a.$monthAndYear, $time = _a.$time, $date = _a.$date;\r\n var day;\r\n if (el) {\r\n day = el.innerHTML.trim();\r\n }\r\n else {\r\n day = this.$date.innerHTML.replace(/[a-z]+/, '');\r\n }\r\n var _b = $monthAndYear.innerHTML.split(' '), monthName = _b[0], year = _b[1];\r\n var month = dateUtil.months.indexOf(monthName);\r\n var timeComponents = $time.innerHTML.split(':');\r\n var hours = +timeComponents[0];\r\n var _c = timeComponents[1].split(' '), minutes = _c[0], meridium = _c[1];\r\n if (meridium === 'AM' && hours == 12) {\r\n hours = 0;\r\n }\r\n if (meridium === 'PM' && hours < 12) {\r\n hours += 12;\r\n }\r\n var date = new Date(+year, +month, +day, +hours, +minutes);\r\n this.selectedDate = date;\r\n var _date = day + ' ';\r\n _date += $monthAndYear.innerHTML.trim() + ' ';\r\n _date += $time.innerHTML.trim();\r\n this.readableDate = _date.replace(/^\\d+/, date.getDate().toString());\r\n };\r\n SimplePicker.prototype.selectDateElement = function (el) {\r\n var alreadyActive = this.$('.simplepicker-calender tbody .active');\r\n el.classList.add('active');\r\n if (alreadyActive) {\r\n alreadyActive.classList.remove('active');\r\n }\r\n this.updateSelectedDate(el);\r\n this.updateDateComponents(this.selectedDate);\r\n };\r\n SimplePicker.prototype.findElementWithDate = function (date, returnLastIfNotFound) {\r\n if (returnLastIfNotFound === void 0) { returnLastIfNotFound = false; }\r\n var $tds = this.$tds;\r\n var el, lastTd;\r\n $tds.forEach(function (td) {\r\n var content = td.innerHTML.trim();\r\n if (content === date) {\r\n el = td;\r\n }\r\n if (content !== '') {\r\n lastTd = td;\r\n }\r\n });\r\n if (el === undefined && returnLastIfNotFound) {\r\n el = lastTd;\r\n }\r\n return el;\r\n };\r\n SimplePicker.prototype.handleIconButtonClick = function (el) {\r\n var $ = this.$;\r\n var baseClass = 'simplepicker-icon-';\r\n var nextIcon = baseClass + 'next';\r\n var previousIcon = baseClass + 'previous';\r\n var calenderIcon = baseClass + 'calender';\r\n var timeIcon = baseClass + 'time';\r\n if (el.classList.contains(calenderIcon)) {\r\n var $timeIcon = $('.' + timeIcon);\r\n var $timeSection = $('.simplepicker-time-section');\r\n var $calenderSection = $('.simplepicker-calender-section');\r\n $calenderSection.style.display = 'block';\r\n $timeSection.style.display = 'none';\r\n $timeIcon.classList.remove('active');\r\n el.classList.add('active');\r\n this.toogleDisplayFade();\r\n return;\r\n }\r\n if (el.classList.contains(timeIcon)) {\r\n var $calenderIcon = $('.' + calenderIcon);\r\n var $calenderSection = $('.simplepicker-calender-section');\r\n var $timeSection = $('.simplepicker-time-section');\r\n $timeSection.style.display = 'block';\r\n $calenderSection.style.display = 'none';\r\n $calenderIcon.classList.remove('active');\r\n el.classList.add('active');\r\n this.toogleDisplayFade();\r\n return;\r\n }\r\n var selectedDate;\r\n var $active = $('.simplepicker-calender td.active');\r\n if ($active) {\r\n selectedDate = $active.innerHTML.trim();\r\n }\r\n if (el.classList.contains(nextIcon)) {\r\n this.render(dateUtil.scrapeNextMonth());\r\n }\r\n if (el.classList.contains(previousIcon)) {\r\n this.render(dateUtil.scrapePreviousMonth());\r\n }\r\n if (selectedDate) {\r\n var $dateTd = this.findElementWithDate(selectedDate, true);\r\n this.selectDateElement($dateTd);\r\n }\r\n };\r\n SimplePicker.prototype.initListeners = function () {\r\n var _a = this, $simplepicker = _a.$simplepicker, $timeInput = _a.$timeInput, $ok = _a.$ok, $cancel = _a.$cancel, $simplepickerWrapper = _a.$simplepickerWrapper;\r\n var _this = this;\r\n $simplepicker.addEventListener('click', function (e) {\r\n var target = e.target;\r\n var tagName = target.tagName.toLowerCase();\r\n e.stopPropagation();\r\n if (tagName === 'td') {\r\n _this.selectDateElement(target);\r\n return;\r\n }\r\n if (tagName === 'button' &&\r\n target.classList.contains('simplepicker-icon')) {\r\n _this.handleIconButtonClick(target);\r\n return;\r\n }\r\n });\r\n $timeInput.addEventListener('input', function (e) {\r\n if (e.target.value === '') {\r\n return;\r\n }\r\n var formattedTime = dateUtil.formatTimeFromInputElement(e.target.value);\r\n _this.$time.innerHTML = formattedTime;\r\n _this.updateSelectedDate();\r\n });\r\n $ok.addEventListener('click', function () {\r\n _this.close();\r\n _this.callEvent('submit', function (func) {\r\n func(_this.selectedDate, _this.readableDate);\r\n });\r\n });\r\n function close() {\r\n _this.close();\r\n _this.callEvent('close', function (f) { f(); });\r\n }\r\n ;\r\n $cancel.addEventListener('click', close);\r\n $simplepickerWrapper.addEventListener('click', close);\r\n };\r\n SimplePicker.prototype.callEvent = function (event, dispatcher) {\r\n var listeners = this._eventHandlers[event] || [];\r\n listeners.forEach(function (func) {\r\n dispatcher(func);\r\n });\r\n };\r\n SimplePicker.prototype.open = function () {\r\n this.$simplepickerWrapper.classList.add('active');\r\n };\r\n // can be called by user or by click the cancel btn.\r\n SimplePicker.prototype.close = function () {\r\n this.$simplepickerWrapper.classList.remove('active');\r\n };\r\n SimplePicker.prototype.on = function (event, handler) {\r\n var _a = this, _validOnListeners = _a._validOnListeners, _eventHandlers = _a._eventHandlers;\r\n if (!_validOnListeners.includes(event)) {\r\n throw new Error('Not a valid event!');\r\n }\r\n _eventHandlers[event] = _eventHandlers[event] || [];\r\n _eventHandlers[event].push(handler);\r\n };\r\n SimplePicker.prototype.toogleDisplayFade = function () {\r\n this.$time.classList.toggle('simplepicker-fade');\r\n this.$displayDateElements.forEach(function ($el) {\r\n $el.classList.toggle('simplepicker-fade');\r\n });\r\n };\r\n return SimplePicker;\r\n}());\r\nmodule.exports = SimplePicker;\r\n","\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nfunction repeat(str, times) {\r\n var repeated = '';\r\n for (var i = 1; i <= times; i++) {\r\n repeated += str;\r\n }\r\n return repeated;\r\n}\r\nexports.htmlTemplate = \"\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n \\n
12:00 PM
\\n \\n
\\n
\\n
\\n
\\n
\\n \\n
\\n \\n
\\n
\\n \\n \\n \\n \\n \\n \" + repeat('', 6) + \"\\n \\n
SunMonTueWedThuFriSat
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n \\n \\n
\\n
\\n
\\n\";\r\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/template.d.ts: -------------------------------------------------------------------------------- 1 | export declare const htmlTemplate: string; 2 | -------------------------------------------------------------------------------- /index-multi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | simplepicker 10 | 11 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 |
45 | 46 | 47 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | simplepicker 9 | 10 | 23 | 24 | 25 | 26 |
Event logs:
27 | 28 | 29 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /lib/date-util.ts: -------------------------------------------------------------------------------- 1 | export interface MonthTracker { 2 | years: Object; 3 | current?: Date; 4 | }; 5 | 6 | export const monthTracker: MonthTracker = { 7 | years: {} 8 | }; 9 | 10 | export const months = [ 11 | 'January', 12 | 'February', 13 | 'March', 14 | 'April', 15 | 'May', 16 | 'June', 17 | 'July', 18 | 'August', 19 | 'September', 20 | 'October', 21 | 'November', 22 | 'December' 23 | ]; 24 | 25 | export const days = [ 26 | 'Sunday', 27 | 'Monday', 28 | 'Tuesday', 29 | 'Wednesday', 30 | 'Thursday', 31 | 'Friday', 32 | 'Saturday' 33 | ]; 34 | 35 | function fill(arr: T[], upto: number): T[] { 36 | const temp: T[] = []; 37 | arr = temp.concat(arr); 38 | for (let i = 0; i < upto; i++) { 39 | (arr[i] as any) = undefined; 40 | } 41 | 42 | return arr; 43 | } 44 | 45 | // builds the calender for one month given a date 46 | // which is end, start or in middle of the month 47 | export function scrapeMonth(date: Date) { 48 | const originalDate = new Date(date.getTime()); 49 | const year = date.getFullYear(); 50 | const month = date.getMonth(); 51 | 52 | const data = { 53 | date: originalDate, 54 | month: undefined 55 | }; 56 | 57 | monthTracker.current = new Date(date.getTime()); 58 | monthTracker.current.setDate(1); 59 | monthTracker.years[year] = monthTracker.years[year] || {}; 60 | if (monthTracker.years[year][month] !== undefined) { 61 | data.month = monthTracker.years[year][month]; 62 | return data; 63 | } 64 | 65 | date = new Date(date.getTime()); 66 | date.setDate(1); 67 | monthTracker.years[year][month] = []; 68 | 69 | let tracker = monthTracker.years[year][month]; 70 | let rowTracker = 0; 71 | while (date.getMonth() === month) { 72 | const _date = date.getDate(); 73 | const day = date.getDay(); 74 | if (_date === 1) { 75 | tracker[rowTracker] = fill([], day); 76 | } 77 | 78 | tracker[rowTracker] = tracker[rowTracker] || []; 79 | tracker[rowTracker][day] = _date; 80 | 81 | if (day === 6) { 82 | rowTracker++; 83 | } 84 | 85 | date.setDate(date.getDate() + 1); 86 | } 87 | 88 | let lastRow = 5; 89 | if (tracker[5] === undefined) { 90 | lastRow = 4; 91 | tracker[5] = fill([], 7); 92 | } 93 | 94 | let lastRowLength = tracker[lastRow].length; 95 | if (lastRowLength < 7) { 96 | let filled = tracker[lastRow].concat(fill([], 7 - lastRowLength)); 97 | tracker[lastRow] = filled; 98 | } 99 | 100 | data.month = tracker; 101 | return data; 102 | } 103 | 104 | export function scrapePreviousMonth() { 105 | const date = monthTracker.current; 106 | if (!date) { 107 | throw Error('scrapePrevoisMonth called without setting monthTracker.current!'); 108 | } 109 | 110 | date.setMonth(date.getMonth() - 1); 111 | return scrapeMonth(date); 112 | } 113 | 114 | export function scrapeNextMonth() { 115 | const date = monthTracker.current; 116 | if (!date) { 117 | throw Error('scrapePrevoisMonth called without setting monthTracker.current!'); 118 | } 119 | 120 | date.setMonth(date.getMonth() + 1); 121 | return scrapeMonth(date); 122 | } 123 | 124 | const dateEndings = { 125 | st: [1, 21, 31], 126 | nd: [2, 22], 127 | rd: [3, 23] 128 | }; 129 | 130 | export function getDisplayDate(_date) { 131 | const date = _date.getDate(); 132 | if (dateEndings.st.indexOf(date) !== -1) { 133 | return date + 'st'; 134 | } 135 | 136 | if (dateEndings.nd.indexOf(date) !== -1) { 137 | return date + 'nd'; 138 | } 139 | 140 | if (dateEndings.rd.indexOf(date) !== -1) { 141 | return date + 'rd'; 142 | } 143 | 144 | return date + 'th'; 145 | } 146 | 147 | export function formatTimeFromInputElement(input: string) { 148 | let timeString = ''; 149 | type StringOrNumberTuple = [string | number, string | number]; 150 | let [ hour, minute ] = input.split(':') as StringOrNumberTuple; 151 | hour = +hour; 152 | 153 | const isPM = hour >= 12; 154 | if (isPM && hour > 12) { 155 | hour = hour - 12; 156 | } 157 | 158 | if (!isPM && hour === 0) { 159 | hour = 12; 160 | } 161 | 162 | timeString += hour < 10 ? '0' + hour : hour; 163 | timeString += ':' + minute + ' '; 164 | timeString += isPM ? 'PM' : 'AM'; 165 | return timeString; 166 | } 167 | -------------------------------------------------------------------------------- /lib/index.ts: -------------------------------------------------------------------------------- 1 | import * as dateUtil from './date-util'; 2 | import { htmlTemplate } from './template'; 3 | 4 | type SimplePickerEvent = 'submit' | 'close'; 5 | interface SimplePickerOpts { 6 | zIndex?: number; 7 | compactMode?: boolean; 8 | disableTimeSection?: boolean; 9 | selectedDate?: Date; 10 | } 11 | 12 | const validListeners = [ 13 | 'submit', 14 | 'close', 15 | ] as const; 16 | 17 | type HandlerFunction = (...args: unknown[]) => void; 18 | interface EventHandlers { 19 | [key: string]: HandlerFunction[]; 20 | } 21 | 22 | const today = new Date(); 23 | class SimplePicker { 24 | selectedDate: Date; 25 | $simplePicker: HTMLElement; 26 | readableDate: string; 27 | _eventHandlers: EventHandlers; 28 | _validOnListeners = validListeners; 29 | 30 | private opts: SimplePickerOpts; 31 | private $: Function; 32 | private $$: Function; 33 | private $simplepicker: HTMLElement; 34 | private $simplepickerWrapper: HTMLElement; 35 | private $trs: HTMLElement[]; 36 | private $tds: HTMLElement[]; 37 | private $headerMonthAndYear: HTMLElement; 38 | private $monthAndYear: HTMLElement; 39 | private $date: HTMLElement; 40 | private $day: HTMLElement; 41 | private $time: HTMLElement; 42 | private $timeInput: HTMLInputElement; 43 | private $timeSectionIcon: HTMLElement; 44 | private $cancel: HTMLElement; 45 | private $ok: HTMLElement; 46 | private $displayDateElements: HTMLElement[]; 47 | 48 | constructor(arg1?: HTMLElement | string | SimplePickerOpts, arg2?: SimplePickerOpts) { 49 | let el: HTMLElement | undefined = undefined; 50 | let opts: SimplePickerOpts | undefined = arg2; 51 | 52 | if (typeof arg1 === 'string') { 53 | const element = document.querySelector(arg1); 54 | if (element !== null) { 55 | el = element; 56 | } else { 57 | throw new Error('Invalid selector passed to SimplePicker!'); 58 | } 59 | } else if (arg1 instanceof HTMLElement) { 60 | el = arg1; 61 | } else if (typeof arg1 === 'object') { 62 | opts = arg1 as SimplePickerOpts; 63 | } 64 | 65 | if (!el) { 66 | el = document.querySelector('body'); 67 | } 68 | 69 | if (!opts) { 70 | opts = {}; 71 | } 72 | 73 | this.selectedDate = new Date(); 74 | this.injectTemplate(el); 75 | this.init(el, opts); 76 | this.initListeners(); 77 | 78 | this._eventHandlers = {}; 79 | } 80 | 81 | // We use $, $$ as helper method to conviently select 82 | // element we need for simplepicker. 83 | // Also, Limit the query to the wrapper class to avoid 84 | // selecting elements on the other instance. 85 | initElMethod(el) { 86 | this.$ = (sel) => el.querySelector(sel); 87 | this.$$ = (sel) => el.querySelectorAll(sel); 88 | } 89 | 90 | init(el: HTMLElement, opts: SimplePickerOpts) { 91 | this.$simplepickerWrapper = el.querySelector('.simplepicker-wrapper'); 92 | this.initElMethod(this.$simplepickerWrapper); 93 | 94 | const { $, $$ } = this; 95 | this.$simplepicker = $('.simpilepicker-date-picker'); 96 | this.$trs = $$('.simplepicker-calender tbody tr'); 97 | this.$tds = $$('.simplepicker-calender tbody td'); 98 | this.$headerMonthAndYear = $('.simplepicker-month-and-year'); 99 | this.$monthAndYear = $('.simplepicker-selected-date'); 100 | this.$date = $('.simplepicker-date'); 101 | this.$day = $('.simplepicker-day-header'); 102 | this.$time = $('.simplepicker-time'); 103 | this.$timeInput = $('.simplepicker-time-section input'); 104 | this.$timeSectionIcon = $('.simplepicker-icon-time'); 105 | this.$cancel = $('.simplepicker-cancel-btn'); 106 | this.$ok = $('.simplepicker-ok-btn'); 107 | 108 | this.$displayDateElements = [ 109 | this.$day, 110 | this.$headerMonthAndYear, 111 | this.$date 112 | ]; 113 | 114 | this.$time.classList.add('simplepicker-fade'); 115 | this.render(dateUtil.scrapeMonth(today)); 116 | 117 | opts = opts || {}; 118 | this.opts = opts; 119 | 120 | this.reset(opts.selectedDate || today); 121 | 122 | if (opts.zIndex !== undefined) { 123 | this.$simplepickerWrapper.style.zIndex = opts.zIndex.toString(); 124 | } 125 | 126 | if (opts.disableTimeSection) { 127 | this.disableTimeSection(); 128 | } 129 | 130 | if (opts.compactMode) { 131 | this.compactMode(); 132 | } 133 | } 134 | 135 | // Reset by selecting current date. 136 | reset(newDate?: Date) { 137 | let date = newDate || new Date(); 138 | this.render(dateUtil.scrapeMonth(date)); 139 | 140 | // The timeFull variable below will be formatted as HH:mm:ss. 141 | // Using regular experssion we remove the :ss parts. 142 | const timeFull = date.toTimeString().split(" ")[0] 143 | const time = timeFull.replace(/\:\d\d$/, ""); 144 | this.$timeInput.value = time; 145 | this.$time.innerText = dateUtil.formatTimeFromInputElement(time); 146 | 147 | const dateString = date.getDate().toString(); 148 | const $dateEl = this.findElementWithDate(dateString); 149 | if (!$dateEl.classList.contains('active')) { 150 | this.selectDateElement($dateEl); 151 | this.updateDateComponents(date); 152 | } 153 | } 154 | 155 | compactMode() { 156 | const { $date } = this; 157 | $date.style.display = 'none'; 158 | } 159 | 160 | disableTimeSection() { 161 | const { $timeSectionIcon } = this; 162 | $timeSectionIcon.style.visibility = 'hidden'; 163 | } 164 | 165 | enableTimeSection() { 166 | const { $timeSectionIcon } = this; 167 | $timeSectionIcon.style.visibility = 'visible'; 168 | } 169 | 170 | injectTemplate(el: HTMLElement) { 171 | const $template = document.createElement('template'); 172 | $template.innerHTML = htmlTemplate; 173 | el.appendChild($template.content.cloneNode(true)); 174 | } 175 | 176 | clearRows() { 177 | this.$tds.forEach((td) => { 178 | td.innerHTML = ''; 179 | td.classList.remove('active'); 180 | }); 181 | } 182 | 183 | updateDateComponents(date: Date) { 184 | const day = dateUtil.days[date.getDay()]; 185 | const month = dateUtil.months[date.getMonth()]; 186 | const year = date.getFullYear(); 187 | const monthAndYear = month + ' ' + year; 188 | 189 | this.$headerMonthAndYear.innerHTML = monthAndYear; 190 | this.$monthAndYear.innerHTML = monthAndYear; 191 | this.$day.innerHTML = day; 192 | this.$date.innerHTML = dateUtil.getDisplayDate(date); 193 | } 194 | 195 | render(data) { 196 | const { $$, $trs } = this; 197 | const { month, date } = data; 198 | 199 | this.clearRows(); 200 | month.forEach((week, index) => { 201 | const $tds = $trs[index].children; 202 | week.forEach((day, index) => { 203 | const td = $tds[index]; 204 | if (!day) { 205 | td.setAttribute('data-empty', ''); 206 | return; 207 | } 208 | 209 | td.removeAttribute('data-empty'); 210 | td.innerHTML = day; 211 | }); 212 | }); 213 | 214 | const $lastRowDates = $$('table tbody tr:last-child td'); 215 | let lasRowIsEmpty = true; 216 | $lastRowDates.forEach(date => { 217 | if (date.dataset.empty === undefined) { 218 | lasRowIsEmpty = false; 219 | } 220 | }); 221 | 222 | // hide last row if it's empty to avoid 223 | // extra spacing due to last row 224 | const $lastRow = $lastRowDates[0].parentElement; 225 | if (lasRowIsEmpty && $lastRow) { 226 | $lastRow.style.display = 'none'; 227 | } else { 228 | $lastRow.style.display = 'table-row'; 229 | } 230 | 231 | this.updateDateComponents(date); 232 | } 233 | 234 | updateSelectedDate(el?: HTMLElement) { 235 | const { $monthAndYear, $time, $date } = this; 236 | 237 | let day; 238 | if (el) { 239 | day = el.innerHTML.trim(); 240 | } else { 241 | day = this.$date.innerHTML.replace(/[a-z]+/, ''); 242 | } 243 | 244 | const [ monthName, year ] = $monthAndYear.innerHTML.split(' '); 245 | const month = dateUtil.months.indexOf(monthName); 246 | let timeComponents = $time.innerHTML.split(':'); 247 | let hours = +timeComponents[0]; 248 | let [ minutes, meridium ] = timeComponents[1].split(' '); 249 | 250 | if (meridium === 'AM' && hours == 12) { 251 | hours = 0; 252 | } 253 | 254 | if (meridium === 'PM' && hours < 12) { 255 | hours += 12; 256 | } 257 | 258 | const date = new Date(+year, +month, +day, +hours, +minutes); 259 | this.selectedDate = date; 260 | 261 | let _date = day + ' '; 262 | _date += $monthAndYear.innerHTML.trim() + ' '; 263 | _date += $time.innerHTML.trim(); 264 | this.readableDate = _date.replace(/^\d+/, date.getDate().toString()); 265 | } 266 | 267 | selectDateElement(el: HTMLElement) { 268 | const alreadyActive = this.$('.simplepicker-calender tbody .active'); 269 | el.classList.add('active'); 270 | if (alreadyActive) { 271 | alreadyActive.classList.remove('active'); 272 | } 273 | 274 | this.updateSelectedDate(el); 275 | this.updateDateComponents(this.selectedDate); 276 | } 277 | 278 | findElementWithDate(date, returnLastIfNotFound: boolean = false) { 279 | const { $tds } = this; 280 | 281 | let el, lastTd; 282 | $tds.forEach((td) => { 283 | const content = td.innerHTML.trim(); 284 | if (content === date) { 285 | el = td; 286 | } 287 | 288 | if (content !== '') { 289 | lastTd = td; 290 | } 291 | }); 292 | 293 | if (el === undefined && returnLastIfNotFound) { 294 | el = lastTd; 295 | } 296 | 297 | return el; 298 | } 299 | 300 | handleIconButtonClick(el: HTMLElement) { 301 | const { $ } = this; 302 | const baseClass = 'simplepicker-icon-'; 303 | const nextIcon = baseClass + 'next'; 304 | const previousIcon = baseClass + 'previous'; 305 | const calenderIcon = baseClass + 'calender'; 306 | const timeIcon = baseClass + 'time'; 307 | 308 | if (el.classList.contains(calenderIcon)) { 309 | const $timeIcon = $('.' + timeIcon); 310 | const $timeSection = $('.simplepicker-time-section'); 311 | const $calenderSection = $('.simplepicker-calender-section'); 312 | 313 | $calenderSection.style.display = 'block'; 314 | $timeSection.style.display = 'none'; 315 | $timeIcon.classList.remove('active'); 316 | el.classList.add('active'); 317 | this.toogleDisplayFade(); 318 | return; 319 | } 320 | 321 | if (el.classList.contains(timeIcon)) { 322 | const $calenderIcon = $('.' + calenderIcon); 323 | const $calenderSection = $('.simplepicker-calender-section'); 324 | const $timeSection = $('.simplepicker-time-section'); 325 | 326 | $timeSection.style.display = 'block'; 327 | $calenderSection.style.display = 'none'; 328 | $calenderIcon.classList.remove('active'); 329 | el.classList.add('active'); 330 | this.toogleDisplayFade(); 331 | return; 332 | } 333 | 334 | let selectedDate; 335 | const $active = $('.simplepicker-calender td.active'); 336 | if ($active) { 337 | selectedDate = $active.innerHTML.trim(); 338 | } 339 | 340 | if (el.classList.contains(nextIcon)) { 341 | this.render(dateUtil.scrapeNextMonth()); 342 | } 343 | 344 | if (el.classList.contains(previousIcon)) { 345 | this.render(dateUtil.scrapePreviousMonth()); 346 | } 347 | 348 | if (selectedDate) { 349 | let $dateTd = this.findElementWithDate(selectedDate, true); 350 | this.selectDateElement($dateTd); 351 | } 352 | } 353 | 354 | initListeners() { 355 | const { 356 | $simplepicker, $timeInput, 357 | $ok, $cancel, $simplepickerWrapper 358 | } = this; 359 | const _this = this; 360 | $simplepicker.addEventListener('click', function (e) { 361 | const target = e.target as HTMLElement; 362 | const tagName = target.tagName.toLowerCase(); 363 | 364 | e.stopPropagation(); 365 | if (tagName === 'td') { 366 | _this.selectDateElement(target); 367 | return; 368 | } 369 | 370 | if (tagName === 'button' && 371 | target.classList.contains('simplepicker-icon')) { 372 | _this.handleIconButtonClick(target); 373 | return; 374 | } 375 | }); 376 | 377 | $timeInput.addEventListener('input', (e: any) => { 378 | if (e.target.value === '') { 379 | return; 380 | } 381 | 382 | const formattedTime = dateUtil.formatTimeFromInputElement(e.target.value); 383 | _this.$time.innerHTML = formattedTime; 384 | _this.updateSelectedDate(); 385 | }); 386 | 387 | $ok.addEventListener('click', function () { 388 | _this.close(); 389 | _this.callEvent('submit', function (func) { 390 | func(_this.selectedDate, _this.readableDate); 391 | }); 392 | }); 393 | 394 | function close() { 395 | _this.close(); 396 | _this.callEvent('close', function (f) { f() }); 397 | }; 398 | 399 | $cancel.addEventListener('click', close); 400 | $simplepickerWrapper.addEventListener('click', close); 401 | } 402 | 403 | callEvent(event: SimplePickerEvent, dispatcher: (a: HandlerFunction) => void) { 404 | const listeners = this._eventHandlers[event] || []; 405 | listeners.forEach(function (func: HandlerFunction) { 406 | dispatcher(func); 407 | }); 408 | } 409 | 410 | open() { 411 | this.$simplepickerWrapper.classList.add('active'); 412 | } 413 | 414 | // can be called by user or by click the cancel btn. 415 | close() { 416 | this.$simplepickerWrapper.classList.remove('active'); 417 | } 418 | 419 | on(event: SimplePickerEvent, handler: HandlerFunction) { 420 | const { _validOnListeners, _eventHandlers } = this; 421 | if (!_validOnListeners.includes(event)) { 422 | throw new Error('Not a valid event!'); 423 | } 424 | 425 | _eventHandlers[event] = _eventHandlers[event] || []; 426 | _eventHandlers[event].push(handler); 427 | } 428 | 429 | toogleDisplayFade() { 430 | this.$time.classList.toggle('simplepicker-fade'); 431 | this.$displayDateElements.forEach($el => { 432 | $el.classList.toggle('simplepicker-fade'); 433 | }); 434 | } 435 | } 436 | 437 | export = SimplePicker; 438 | -------------------------------------------------------------------------------- /lib/simplepicker.css: -------------------------------------------------------------------------------- 1 | .simplepicker-wrapper { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | overflow: auto; 6 | background-color: #4c4c4c7d; 7 | width: 100vw; 8 | height: 100vh; 9 | display: none; 10 | } 11 | 12 | .simplepicker-wrapper.active { 13 | display: block; 14 | } 15 | 16 | .simpilepicker-date-picker { 17 | width: 326px; 18 | cursor: initial; 19 | font-family: Verdana, Geneva, Tahoma, sans-serif; 20 | font-size: 14px; 21 | background-color: #fff; 22 | margin: 2% auto; 23 | box-shadow: 1px 2px 4px 0.5px rgba(0, 0, 0, 0.22), 24 | 1px 2px 4px 0.5px rgba(0, 0, 0, 0.); 25 | } 26 | 27 | .simplepicker-day-header { 28 | color: #fff; 29 | background-color: #016565; 30 | text-align: center; 31 | padding: 4px 0; 32 | } 33 | 34 | .simplepicker-date-section { 35 | text-align: center; 36 | background-color: #078e8e; 37 | color: #fff; 38 | } 39 | 40 | .simplepicker-date-section .simplepicker-month-and-year { 41 | font-size: 22px; 42 | padding: 14px 0 7px 0; 43 | font-weight: 200; 44 | } 45 | 46 | .simplepicker-date-section .simplepicker-date { 47 | font-size: 35px; 48 | padding: 2px; 49 | margin-bottom: 12px; 50 | } 51 | 52 | .simplepicker-select-pane { 53 | display: flex; 54 | width: 100%; 55 | } 56 | 57 | .simplepicker-select-pane .simplepicker-time, 58 | .simplepicker-selected-date { 59 | text-align: center; 60 | flex: 2; 61 | } 62 | 63 | .simplepicker-icon, .simplepicker-time, 64 | .simplepicker-selected-date { 65 | border: none; 66 | background: transparent; 67 | padding: 2px; 68 | margin: 4px 6px; 69 | width: 25px; 70 | height: 25px; 71 | opacity: 0.5; 72 | } 73 | 74 | .simplepicker-time, .simplepicker-selected-date { 75 | opacity: 1; 76 | } 77 | 78 | .simplepicker-month-switcher { 79 | margin-top: 5px; 80 | } 81 | 82 | .simplepicker-icon:hover { 83 | opacity: 0.8; 84 | } 85 | 86 | .simplepicker-icon:active, .simplepicker-icon.active { 87 | opacity: 1; 88 | } 89 | 90 | .simplepicker-icon:focus { 91 | outline: none; 92 | } 93 | 94 | .simplepicker-icon-next { 95 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==); 96 | } 97 | 98 | .simplepicker-icon-previous { 99 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=); 100 | } 101 | 102 | .simplepicker-icon-calender { 103 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==); 104 | } 105 | 106 | .simplepicker-icon-time { 107 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+); 108 | } 109 | 110 | .simplepicker-bottom-part { 111 | padding-top: 6px; 112 | padding-bottom: 12px; 113 | padding-left: 48%; 114 | } 115 | 116 | .simplepicker-calender table { 117 | width: 100%; 118 | font-size: 13px; 119 | } 120 | 121 | .simplepicker-calender thead th { 122 | font-weight: normal; 123 | font-size: 15px; 124 | padding-bottom: 6px; 125 | width: 14.28%; 126 | height: 30px; 127 | text-align: center; 128 | } 129 | 130 | .simplepicker-calender tbody td { 131 | position: relative; 132 | text-align: center; 133 | vertical-align: middle; 134 | padding: 12px; 135 | z-index: 1; 136 | } 137 | 138 | .simplepicker-calender tbody td::after { 139 | content: " "; 140 | visibility: hidden; 141 | display: block; 142 | position: absolute; 143 | left: 50%; 144 | top: 50%; 145 | height: 35px; 146 | width: 35px; 147 | border-radius: 50%; 148 | transform: translate(-50%, -50%); 149 | background-color: rgba(0, 0, 0, 0.05); 150 | } 151 | 152 | .simplepicker-calender tbody td:hover::after { 153 | visibility: visible; 154 | } 155 | 156 | .simplepicker-calender tbody td:active, 157 | .simplepicker-calender tbody td.active { 158 | color: #fff; 159 | } 160 | 161 | .simplepicker-calender tbody td:active::after, 162 | .simplepicker-calender tbody .active::after { 163 | visibility: visible; 164 | background-color:teal; 165 | z-index: -1; 166 | } 167 | 168 | .simplepicker-calender tbody td[data-empty] { 169 | pointer-events: none; 170 | } 171 | 172 | .simplepicker-time-section { 173 | display: none; 174 | height: 120px; 175 | } 176 | 177 | .simplepicker-time-section input { 178 | box-sizing: border-box; 179 | width: 120px; 180 | height: 32px; 181 | max-width: 120px; 182 | max-height: 32px; 183 | padding: 4px 3px; 184 | border: none; 185 | border-bottom: 2px solid #ccc; 186 | font-size: 14px; 187 | font-family: Verdana, Geneva, Tahoma, sans-serif; 188 | display: block; 189 | margin: 25% auto; 190 | } 191 | 192 | .simplepicker-time-section input:focus { 193 | outline: none; 194 | border-bottom-color: teal; 195 | } 196 | 197 | .simplepicker-picker-section { 198 | width: 100%; 199 | height: auto; 200 | } 201 | 202 | .simplepicker-btn { 203 | border: none; 204 | background: transparent; 205 | font-family: Verdana, Geneva, Tahoma, sans-serif; 206 | font-size: 16px; 207 | padding: 7px 14px; 208 | border: 1px solid #ddd; 209 | margin: 0 5px; 210 | border-color: #016565; 211 | color: #016565; 212 | font-size: 13px; 213 | } 214 | 215 | .simplepicker-btn:hover, .simplepicker-btn:active { 216 | color: white; 217 | background-color: #016565; 218 | } 219 | 220 | .simplepicker-fade { 221 | color: rgba(225, 225, 225, 0.95); 222 | } 223 | 224 | .simplepicker-wrapper, .simplepicker-icon, 225 | .simplepicker-btn { 226 | cursor: pointer; 227 | } 228 | -------------------------------------------------------------------------------- /lib/template.ts: -------------------------------------------------------------------------------- 1 | function repeat(str: string, times: number): string { 2 | let repeated = ''; 3 | for (let i = 1; i <= times; i++) { 4 | repeated += str; 5 | } 6 | 7 | return repeated; 8 | } 9 | 10 | export const htmlTemplate = ` 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 |
12:00 PM
20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | ${ repeat('', 6) } 37 | 38 |
SunMonTueWedThuFriSat
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 |
51 | `; 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplepicker", 3 | "version": "2.0.4", 4 | "description": "Simple date picker written in vanilla js.", 5 | "main": "./dist/simplepicker.node.js", 6 | "types": "./dist/index.d.ts", 7 | "scripts": { 8 | "start": "webpack-dev-server --hot", 9 | "prepack": "webpack-cli -p --env production", 10 | "build": "webpack-cli -p --env production" 11 | }, 12 | "files": [ 13 | "dist/", 14 | "simplepicker.d.ts" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "git+ssh://git@github.com/priyank-p/simplepicker.git" 19 | }, 20 | "keywords": [ 21 | "simple", 22 | "date", 23 | "picker", 24 | "datepicker", 25 | "date-picker" 26 | ], 27 | "author": "Priyank Patel ", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/priyankp10/simplepicker/issues" 31 | }, 32 | "homepage": "https://github.com/priyankp10/simplepicker#readme", 33 | "devDependencies": { 34 | "@babel/core": "^7.2.2", 35 | "@babel/preset-env": "^7.2.3", 36 | "babel-loader": "^8.0.5", 37 | "css-loader": "^0.28.11", 38 | "mini-css-extract-plugin": "^0.4.5", 39 | "webpack": "^4.28.3", 40 | "webpack-cli": "^3.2.0", 41 | "webpack-dev-server": "^3.1.14" 42 | }, 43 | "dependencies": { 44 | "ts-loader": "^5.4.3", 45 | "typescript": "^3.4.5" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "module": "commonjs", 5 | "lib": ["es6", "dom", "es2017"], 6 | "target": "es5", 7 | "strictNullChecks": true, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | const ROOT_DIR = __dirname; 6 | module.exports = function (env) { 7 | const production = env === 'production'; 8 | let config = { 9 | entry: { 10 | simplepicker: [ 11 | './lib/simplepicker.css', 12 | './lib/index.ts' 13 | ] 14 | }, 15 | output: { 16 | filename: '[name].js', 17 | path: path.resolve(ROOT_DIR, 'dist'), 18 | library: 'SimplePicker', 19 | libraryTarget: 'var' 20 | }, 21 | resolve: { 22 | extensions: [ '.css', '.ts', '.js' ] 23 | }, 24 | context: ROOT_DIR, 25 | target: 'web', 26 | mode: production ? 'production' : 'development', 27 | devtool: 'source-map', 28 | plugins: [ 29 | new webpack.HashedModuleIdsPlugin(), 30 | new MiniCSSExtractPlugin({ 31 | filename: '[name].css', 32 | chunkFilename: '[id].css' 33 | }) 34 | ] 35 | }; 36 | 37 | config.module = {}; 38 | config.module.rules = [ 39 | { 40 | test: /\.css$/, 41 | use: [ 42 | MiniCSSExtractPlugin.loader, 43 | { 44 | loader: 'css-loader', 45 | options: { 46 | sourceMap: true, 47 | minimize: production 48 | } 49 | }, 50 | ] 51 | },{ 52 | test: /\.ts$/, 53 | use: 'ts-loader', 54 | exclude: /node_modules/ 55 | } 56 | ]; 57 | 58 | if (production) { 59 | config.module.rules.push({ 60 | test: /\.js$/, 61 | exclude: /node_modules/, 62 | use: { 63 | loader: 'babel-loader', 64 | options: { presets: ['@babel/env'] } 65 | } 66 | }); 67 | 68 | // build a commonjs format file for comsption with 69 | // build tools like webpack, and rollup. 70 | let nodeConfig = { output: {} }; 71 | nodeConfig.output.libraryTarget = 'commonjs2'; 72 | nodeConfig.entry = { 73 | 'simplepicker.node': './lib/index.ts' 74 | }; 75 | 76 | config = [ config, { ...config, ...nodeConfig } ]; 77 | } else { 78 | config.output.publicPath = '/dist/'; 79 | } 80 | 81 | return config; 82 | }; 83 | --------------------------------------------------------------------------------