[
{
"path": ".gitattributes",
"content": "dist/* linguist-documentation=false\r\ndist/* linguist-vendored=false\r\n"
},
{
"path": ".gitignore",
"content": ".vscode/*\r\n.git_credentials"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 alumuko\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# vanilla-datetimerange-picker\n\n## Overview.\nA JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is inspired by [Dan Grossman's bootstrap-daterangepicker](https://github.com/dangrossman/daterangepicker).\n\nActually, this program is base on Dan Grossman's bootstrap-daterangepicker (version 3.1).\nI just changed the code a bit to not need jquery.\n\n\n## Requirements\n- [Moment.js](https://momentjs.com/) (version 2.29.1 is recommended.)\n### IE11\nIf you want to use on Internet Explorer 11, include [Polyfill](https://polyfill.io/v3/polyfill.js?ua=ie/11) to use CustomEvent, Object.assign, Element.prototype.closest and Element.prototype.matches features.\n\n\n## Quick start using CDN.\n1. Include Moment.js and Date Range Picker's css and js files in your webpage:\n```\n\n\n\n\n```\n2. Put \"INPUT\" element into \"BODY\", and bind DateRangePicker instance.\n```\n\n\n\n```\n\nSee [simple example page](examples/datetime-example-simple.html).\n## Usage\n```\nnew DateRangePicker(bindElement, options, callback);\n```\n\n| parameter | type | description |\n----|----|---- \n| bindElement | string or object | bind element id or bind HTMLElement object |\n| options | object | option set (see Options) |\n| callback | function(momemt, moment) | change datetime callback, 2 parameters: start and end datetime |\n\n## Options\n\nAlmost same as Dan Grossman's bootstrap-daterangepicker Version 3.1\n\n| name | type | description |\n----|----|---- \n| startDate | Date or string | The beginning date of the initially selected date range. If you provide a string, it must match the date format string set in your locale setting.|\n| endDate | Date or string | The end date of the initially selected date range.|\n| minDate | Date or string | The earliest date a user may select.|\n| maxDate | Date or string | The latest date a user may select. |\n| maxSpan | object | The maximum span between the selected start and end dates. You can provide any object the moment library would let you add to a date. |\n|showDropdowns | true/**false** | Show year and month select boxes above calendars to jump to a specific month and year. |\n minYear | number | The minimum year shown in the dropdowns when **showDropdowns** is set to true.|\n| maxYear | number | The maximum year shown in the dropdowns when **showDropdowns** is set to true.|\n| showWeekNumbers | true/**false** | Show localized week numbers at the start of each week on the calendars.|\n| showISOWeekNumbers | true/**false** | Show ISO week numbers at the start of each week on the calendars.|\n| timePicker | true/**false** | Adds select boxes to choose times in addition to dates.|\n| timePickerIncrement | number | Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).|\n timePicker24Hour | true/**false** | Use 24-hour instead of 12-hour times, removing the AM/PM selection.|\n| timePickerSeconds | true/**false** | Show seconds in the timePicker. |\n| ranges | object |Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. See example code.|\n| showCustomRangeLabel | **true**/false | Displays \"Custom Range\" at the end of the list of predefined ranges, when the ranges option is used. This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range. |\n| alwaysShowCalendars | true/**false** | Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks \"Custom Range\". When this option is set to true, the calendars for choosing a custom date range are always shown instead. |\n| opens | 'left'/**'right'**/'center' | Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to. |\n| drops | **'down'**/'up'/'auto' | Whether the picker appears below (default) or above the HTML element it's attached to. |\n| buttonClasses | string | CSS class names that will be added to both the apply and cancel buttons.|\n| applyButtonClasses | string | CSS class names that will be added only to the apply button.|\n| cancelButtonClasses | string | CSS class names that will be added only to the cancel button. |\n| singleDatePicker | true/**false** | Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.|\n| autoApply | true/**false** | Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.|\n| linkedCalendars | **true**/false | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.|\n| isInvalidDate | function(moment) | A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.|\n| isCustomDate | function(moment) | A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell.|\n| autoUpdateInput | **true**/false | Indicates whether the date range picker should automatically update the value of the <input> element it's attached to at initialization and when the selected dates change.|\n| parentEl | string | the parent element that the date range picker will be added to, if not provided this will be 'body'|\n| locale | object ||\n| locale.format | string | date time text locale format like \"YYYY年MM月DD日 HH時mm分ss秒\".|\n| locale.separator | string | separator between 2 date times. default separator is \"**-**\"|\n| locale.applyLabel | string | label text of the apply button. default is \"**Apply**\"|\n| locale.cancelLabel | string | label text of the cancel button. default is \"**Cancel**\"|\n| locale.weekLabel | string | label text of week number column like \"**W**\"|\n| locale.daysOfWeek | array of 7 strings | 7 label texts of week column like **['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']** |\n| locale.monthNames | array of 12 strings | 12 label texts of month nameweek column. like **['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']** |\n| locale.firstDay | number | 0 = from Sunday, 1 = from Monday, ..., 6 = from Saturday |\n> **strong text value** means default value.\n\n\n\n\n## Methods\n\n You can programmatically update the startDate and endDate in the picker using the setStartDate and setEndDate methods. You can access the Date Range Picker object and its functions and properties through data properties of the element you attached it to.\n\n| name | type | description |\n----|----|---- \n| setStartDate | Date or string | Sets the date range picker's currently selected start date to the provided date |\n| setEndDate | Date or string | Sets the date range picker's currently selected end date to the provided date |\n\n### Usage\n```\n let drp = new DateRangePicker('datetimerange-input1', { alwaysShowCalendars: true });,\n drp.setStartDate('2014/03/01');\n drp.setEndDate('2014/03/03');\n```\n\n\n## Events\n\n Several events are triggered on the element you attach the picker to, which you can listen for.\n\n| name | description |\n----|---- \n| show.daterangepicker | Triggered when the picker is shown |\n| hide.daterangepicker | Triggered when the picker is hidden |\n| showCalendar.daterangepicker | Triggered when the calendar(s) are shown |\n| hideCalendar.daterangepicker | Triggered when the calendar(s) are hidden |\n| apply.daterangepicker |Triggered when the apply button is clicked, or when a predefined range is clicked |\n| cancel.daterangepicker |Triggered when the cancel button is clicked |\n\n### Usage\n```\n window.addEventListener('apply.daterangepicker', function (ev) {\n console.log(ev.detail.startDate.format('YYYY-MM-DD'));\n console.log(ev.detail.endDate.format('YYYY-MM-DD'));\n });\n```\n\n\n## Examples\n### Data Time Range Picker with a Callback.\n\n\n```\n\n\n\n```\nSee [datetime example page](/examples/datetime-example.html)\n\n## Extra\n### A Dark Version CSS\n\n\nchange\n```\n\n```\nto\n```\n\n```\n\nSee [datetime dark example page](/examples/datetime-example-dark.html).\n\n### Dynamic DataRange Change (since 0.2.0)\nyou can change dateranges dynamically.\nwith extra function ```updateRanges(Object)```\n\nSee [datetime example page](/examples/datetime-example.html).\n\n\n## Special Thanks\n Special thanks to [Dan Grossman](http://www.dangrossman.info/)\n\n## License\n [MIT License](LICENSE)\n"
},
{
"path": "dist/vanilla-datetimerange-picker.css",
"content": "/**\n* @author: Alumuko https://github.com/alumuko/alumuko\n* @copyright: Copyright (c) 2021 Alumuko. All rights reserved.\n* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php\n* @website: https://github.com/alumuko/vanilla-datetimerange-picker\n*\n* Special thanks to Dan Grossman.\n* This program is base on Dan Grossman's bootstrap-daterangepicker (version 3.1)\n* I just changed the code a bit to not need jquery.\n*/\n\n.daterangepicker {\n position: absolute;\n color: inherit;\n background-color: #fff;\n border-radius: 4px;\n border: 1px solid #ddd;\n width: 278px;\n max-width: none;\n padding: 0;\n margin-top: 7px;\n top: 100px;\n left: 20px;\n z-index: 3001;\n display: none;\n font-family: arial;\n font-size: 15px;\n line-height: 1em;\n}\n\n.daterangepicker:before, .daterangepicker:after {\n position: absolute;\n display: inline-block;\n border-bottom-color: rgba(0, 0, 0, 0.2);\n content: '';\n}\n\n.daterangepicker:before {\n top: -7px;\n border-right: 7px solid transparent;\n border-left: 7px solid transparent;\n border-bottom: 7px solid #ccc;\n}\n\n.daterangepicker:after {\n top: -6px;\n border-right: 6px solid transparent;\n border-bottom: 6px solid #fff;\n border-left: 6px solid transparent;\n}\n\n.daterangepicker.opensleft:before {\n right: 9px;\n}\n\n.daterangepicker.opensleft:after {\n right: 10px;\n}\n\n.daterangepicker.openscenter:before {\n left: 0;\n right: 0;\n width: 0;\n margin-left: auto;\n margin-right: auto;\n}\n\n.daterangepicker.openscenter:after {\n left: 0;\n right: 0;\n width: 0;\n margin-left: auto;\n margin-right: auto;\n}\n\n.daterangepicker.opensright:before {\n left: 9px;\n}\n\n.daterangepicker.opensright:after {\n left: 10px;\n}\n\n.daterangepicker.drop-up {\n margin-top: -7px;\n}\n\n.daterangepicker.drop-up:before {\n top: initial;\n bottom: -7px;\n border-bottom: initial;\n border-top: 7px solid #ccc;\n}\n\n.daterangepicker.drop-up:after {\n top: initial;\n bottom: -6px;\n border-bottom: initial;\n border-top: 6px solid #fff;\n}\n\n.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {\n float: none;\n}\n\n.daterangepicker.single .drp-selected {\n display: none;\n}\n\n.daterangepicker.show-calendar .drp-calendar {\n display: block;\n}\n\n.daterangepicker.show-calendar .drp-buttons {\n display: block;\n}\n\n.daterangepicker.auto-apply .drp-buttons {\n display: none;\n}\n\n.daterangepicker .drp-calendar {\n display: none;\n max-width: 270px;\n}\n\n.daterangepicker .drp-calendar.left {\n padding: 8px 0 8px 8px;\n}\n\n.daterangepicker .drp-calendar.right {\n padding: 8px;\n}\n\n.daterangepicker .drp-calendar.single .calendar-table {\n border: none;\n}\n\n.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {\n color: #fff;\n border: solid black;\n border-width: 0 2px 2px 0;\n border-radius: 0;\n display: inline-block;\n padding: 3px;\n}\n\n.daterangepicker .calendar-table .next span {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n}\n\n.daterangepicker .calendar-table .prev span {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n}\n\n.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {\n white-space: nowrap;\n text-align: center;\n vertical-align: middle;\n min-width: 32px;\n width: 32px;\n height: 24px;\n line-height: 24px;\n font-size: 12px;\n border-radius: 4px;\n border: 1px solid transparent;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.daterangepicker .calendar-table {\n border: 1px solid #fff;\n border-radius: 4px;\n background-color: #fff;\n}\n\n.daterangepicker .calendar-table table {\n width: 100%;\n margin: 0;\n border-spacing: 0;\n border-collapse: collapse;\n}\n\n.daterangepicker td.available:hover, .daterangepicker th.available:hover {\n background-color: #eee;\n border-color: transparent;\n color: inherit;\n}\n\n.daterangepicker td.week, .daterangepicker th.week {\n font-size: 80%;\n color: #ccc;\n}\n\n.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {\n background-color: #fff;\n border-color: transparent;\n color: #999;\n}\n\n.daterangepicker td.in-range {\n background-color: #ebf4f8;\n border-color: transparent;\n color: #000;\n border-radius: 0;\n}\n\n.daterangepicker td.start-date {\n border-radius: 4px 0 0 4px;\n}\n\n.daterangepicker td.end-date {\n border-radius: 0 4px 4px 0;\n}\n\n.daterangepicker td.start-date.end-date {\n border-radius: 4px;\n}\n\n.daterangepicker td.active, .daterangepicker td.active:hover {\n background-color: #357ebd;\n border-color: transparent;\n color: #fff;\n}\n\n.daterangepicker th.month {\n width: auto;\n}\n\n.daterangepicker td.disabled, .daterangepicker option.disabled {\n color: #999;\n cursor: not-allowed;\n text-decoration: line-through;\n}\n\n.daterangepicker select.monthselect, .daterangepicker select.yearselect {\n font-size: 12px;\n padding: 1px;\n height: auto;\n margin: 0;\n cursor: default;\n}\n\n.daterangepicker select.monthselect {\n margin-right: 2%;\n width: 56%;\n}\n\n.daterangepicker select.yearselect {\n width: 40%;\n}\n\n.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {\n width: 50px;\n margin: 0 auto;\n background: #eee;\n border: 1px solid #eee;\n padding: 2px;\n outline: 0;\n font-size: 12px;\n}\n\n.daterangepicker .calendar-time {\n text-align: center;\n margin: 4px auto 0 auto;\n line-height: 30px;\n position: relative;\n}\n\n.daterangepicker .calendar-time select.disabled {\n color: #ccc;\n cursor: not-allowed;\n}\n\n.daterangepicker .drp-buttons {\n clear: both;\n text-align: right;\n padding: 8px;\n border-top: 1px solid #ddd;\n display: none;\n line-height: 12px;\n vertical-align: middle;\n}\n\n.daterangepicker .drp-selected {\n display: inline-block;\n font-size: 12px;\n padding-right: 8px;\n}\n\n.daterangepicker .drp-buttons .btn {\n margin-left: 8px;\n font-size: 12px;\n font-weight: bold;\n padding: 4px 8px;\n}\n\n.daterangepicker.show-ranges.single.rtl .drp-calendar.left {\n border-right: 1px solid #ddd;\n}\n\n.daterangepicker.show-ranges.single.ltr .drp-calendar.left {\n border-left: 1px solid #ddd;\n}\n\n.daterangepicker.show-ranges.rtl .drp-calendar.right {\n border-right: 1px solid #ddd;\n}\n\n.daterangepicker.show-ranges.ltr .drp-calendar.left {\n border-left: 1px solid #ddd;\n}\n\n.daterangepicker .ranges {\n float: none;\n text-align: left;\n margin: 0;\n}\n\n.daterangepicker.show-calendar .ranges {\n margin-top: 8px;\n}\n\n.daterangepicker .ranges ul {\n list-style: none;\n margin: 0 auto;\n padding: 0;\n width: 100%;\n}\n\n.daterangepicker .ranges li {\n font-size: 12px;\n padding: 8px 12px;\n cursor: pointer;\n}\n\n.daterangepicker .ranges li:hover {\n background-color: #eee;\n}\n\n.daterangepicker .ranges li.active {\n background-color: #08c;\n color: #fff;\n}\n\n/* Larger Screen Styling */\n@media (min-width: 564px) {\n .daterangepicker {\n width: auto;\n }\n\n .daterangepicker .ranges ul {\n width: 140px;\n }\n\n .daterangepicker.single .ranges ul {\n width: 100%;\n }\n\n .daterangepicker.single .drp-calendar.left {\n clear: none;\n }\n\n .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {\n float: left;\n }\n\n .daterangepicker {\n direction: ltr;\n text-align: left;\n }\n\n .daterangepicker .drp-calendar.left {\n clear: left;\n margin-right: 0;\n }\n\n .daterangepicker .drp-calendar.left .calendar-table {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .daterangepicker .drp-calendar.right {\n margin-left: 0;\n }\n\n .daterangepicker .drp-calendar.right .calendar-table {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .daterangepicker .drp-calendar.left .calendar-table {\n padding-right: 8px;\n }\n\n .daterangepicker .ranges, .daterangepicker .drp-calendar {\n float: left;\n }\n}\n\n@media (min-width: 730px) {\n .daterangepicker .ranges {\n width: auto;\n }\n\n .daterangepicker .ranges {\n float: left;\n }\n\n .daterangepicker.rtl .ranges {\n float: right;\n }\n\n .daterangepicker .drp-calendar.left {\n clear: none !important;\n }\n}\n"
},
{
"path": "dist/vanilla-datetimerange-picker.js",
"content": "/**\n* @author: Alumuko https://github.com/alumuko/alumuko\n* @copyright: Copyright (c) 2021 Alumuko. All rights reserved.\n* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php\n* @website: https://github.com/alumuko/vanilla-datetimerange-picker\n*\n* Special thanks to Dan Grossman.\n* This program is base on Dan Grossman's bootstrap-daterangepicker (version 3.1)\n* I just changed the code a bit to not need jquery.\n*/\n\n// IE browser doesn't support \"class\"\nvar DateRangePicker;\n(function () {\n DateRangePicker = function (element, options, cb) {\n\n //default settings for options\n this.parentEl = document.body;\n if (typeof element === 'string')\n this.element = document.getElementById(element);\n else\n this.element = element;\n this.startDate = moment().startOf('day');\n this.endDate = moment().endOf('day');\n this.minDate = false;\n this.maxDate = false;\n this.maxSpan = false;\n this.autoApply = false;\n this.singleDatePicker = false;\n this.showDropdowns = false;\n this.minYear = moment().subtract(100, 'year').format('YYYY');\n this.maxYear = moment().add(100, 'year').format('YYYY');\n this.showWeekNumbers = false;\n this.showISOWeekNumbers = false;\n this.showCustomRangeLabel = true;\n this.timePicker = false;\n this.timePicker24Hour = false;\n this.timePickerIncrement = 1;\n this.timePickerSeconds = false;\n this.linkedCalendars = true;\n this.autoUpdateInput = true;\n this.alwaysShowCalendars = false;\n this.ranges = {};\n\n this.opens = 'right';\n if (this.element.classList.contains('pull-right'))\n this.opens = 'left';\n\n this.drops = 'down';\n if (this.element.classList.contains('dropup'))\n this.drops = 'up';\n\n this.buttonClasses = 'btn btn-sm';\n this.applyButtonClasses = 'btn-primary';\n this.cancelButtonClasses = 'btn-default';\n\n this.locale = {\n direction: 'ltr',\n format: moment.localeData().longDateFormat('L'),\n separator: ' - ',\n applyLabel: 'Apply',\n cancelLabel: 'Cancel',\n weekLabel: 'W',\n customRangeLabel: 'Custom Range',\n daysOfWeek: moment.weekdaysMin(),\n monthNames: moment.monthsShort(),\n firstDay: moment.localeData().firstDayOfWeek()\n };\n\n this.callback = function() { };\n\n //some state information\n this.isShowing = false;\n this.leftCalendar = {};\n this.rightCalendar = {};\n\n //custom options from user\n if (typeof options !== 'object' || options === null)\n options = {};\n\n //allow setting options with data attributes\n //data-api options will be overwritten with custom javascript options\n options = Object.assign(Object.assign({}, this.element.dataset), options);\n\n //html template for the picker UI\n if (typeof options.template !== 'string')\n options.template =\n '
' +\n '' +\n '
' +\n '' +\n '' +\n '
' +\n '
' +\n '' +\n '' +\n '
' +\n '
' +\n '' +\n '' +\n ' ' +\n '
' +\n '
';\n\n this.parentEl = options.parentEl ? options.parentEl : this.parentEl;\n var templateWrapEl = document.createElement('div');\n templateWrapEl.innerHTML = options.template.trim();\n this.container = templateWrapEl.firstElementChild;\n this.parentEl.insertAdjacentElement('beforeEnd', this.container);\n\n //\n // handle all the possible options overriding defaults\n //\n\n if (typeof options.locale === 'object') {\n\n if (typeof options.locale.direction === 'string')\n this.locale.direction = options.locale.direction;\n\n if (typeof options.locale.format === 'string')\n this.locale.format = options.locale.format;\n\n if (typeof options.locale.separator === 'string')\n this.locale.separator = options.locale.separator;\n\n if (typeof options.locale.daysOfWeek === 'object')\n this.locale.daysOfWeek = options.locale.daysOfWeek.slice();\n\n if (typeof options.locale.monthNames === 'object')\n this.locale.monthNames = options.locale.monthNames.slice();\n\n if (typeof options.locale.firstDay === 'number')\n this.locale.firstDay = options.locale.firstDay;\n\n if (typeof options.locale.applyLabel === 'string')\n this.locale.applyLabel = options.locale.applyLabel;\n\n if (typeof options.locale.cancelLabel === 'string')\n this.locale.cancelLabel = options.locale.cancelLabel;\n\n if (typeof options.locale.weekLabel === 'string')\n this.locale.weekLabel = options.locale.weekLabel;\n\n if (typeof options.locale.customRangeLabel === 'string'){\n //Support unicode chars in the custom range name.\n var elem = document.createElement('textarea');\n elem.innerHTML = options.locale.customRangeLabel;\n var rangeHtml = elem.value;\n this.locale.customRangeLabel = rangeHtml;\n }\n }\n this.container.classList.add(this.locale.direction);\n\n if (typeof options.startDate === 'string')\n this.startDate = moment(options.startDate, this.locale.format);\n\n if (typeof options.endDate === 'string')\n this.endDate = moment(options.endDate, this.locale.format);\n\n if (typeof options.minDate === 'string')\n this.minDate = moment(options.minDate, this.locale.format);\n\n if (typeof options.maxDate === 'string')\n this.maxDate = moment(options.maxDate, this.locale.format);\n\n if (typeof options.startDate === 'object')\n this.startDate = moment(options.startDate);\n\n if (typeof options.endDate === 'object')\n this.endDate = moment(options.endDate);\n\n if (typeof options.minDate === 'object')\n this.minDate = moment(options.minDate);\n\n if (typeof options.maxDate === 'object')\n this.maxDate = moment(options.maxDate);\n\n // sanity check for bad options\n if (this.minDate && this.startDate.isBefore(this.minDate))\n this.startDate = this.minDate.clone();\n\n // sanity check for bad options\n if (this.maxDate && this.endDate.isAfter(this.maxDate))\n this.endDate = this.maxDate.clone();\n\n if (typeof options.applyButtonClasses === 'string')\n this.applyButtonClasses = options.applyButtonClasses;\n\n if (typeof options.applyClass === 'string') //backwards compat\n this.applyButtonClasses = options.applyClass;\n\n if (typeof options.cancelButtonClasses === 'string')\n this.cancelButtonClasses = options.cancelButtonClasses;\n\n if (typeof options.cancelClass === 'string') //backwards compat\n this.cancelButtonClasses = options.cancelClass;\n\n if (typeof options.maxSpan === 'object')\n this.maxSpan = options.maxSpan;\n\n if (typeof options.dateLimit === 'object') //backwards compat\n this.maxSpan = options.dateLimit;\n\n if (typeof options.opens === 'string')\n this.opens = options.opens;\n\n if (typeof options.drops === 'string')\n this.drops = options.drops;\n\n if (typeof options.showWeekNumbers === 'boolean')\n this.showWeekNumbers = options.showWeekNumbers;\n\n if (typeof options.showISOWeekNumbers === 'boolean')\n this.showISOWeekNumbers = options.showISOWeekNumbers;\n\n if (typeof options.buttonClasses === 'string')\n this.buttonClasses = options.buttonClasses;\n\n if (typeof options.buttonClasses === 'object')\n this.buttonClasses = options.buttonClasses.join(' ');\n\n if (typeof options.showDropdowns === 'boolean')\n this.showDropdowns = options.showDropdowns;\n\n if (typeof options.minYear === 'number')\n this.minYear = options.minYear;\n\n if (typeof options.maxYear === 'number')\n this.maxYear = options.maxYear;\n\n if (typeof options.showCustomRangeLabel === 'boolean')\n this.showCustomRangeLabel = options.showCustomRangeLabel;\n\n if (typeof options.singleDatePicker === 'boolean') {\n this.singleDatePicker = options.singleDatePicker;\n if (this.singleDatePicker)\n this.endDate = this.startDate.clone();\n }\n\n if (typeof options.timePicker === 'boolean')\n this.timePicker = options.timePicker;\n\n if (typeof options.timePickerSeconds === 'boolean')\n this.timePickerSeconds = options.timePickerSeconds;\n\n if (typeof options.timePickerIncrement === 'number')\n this.timePickerIncrement = options.timePickerIncrement;\n\n if (typeof options.timePicker24Hour === 'boolean')\n this.timePicker24Hour = options.timePicker24Hour;\n\n if (typeof options.autoApply === 'boolean')\n this.autoApply = options.autoApply;\n\n if (typeof options.autoUpdateInput === 'boolean')\n this.autoUpdateInput = options.autoUpdateInput;\n\n if (typeof options.linkedCalendars === 'boolean')\n this.linkedCalendars = options.linkedCalendars;\n\n if (typeof options.isInvalidDate === 'function')\n this.isInvalidDate = options.isInvalidDate;\n\n if (typeof options.isCustomDate === 'function')\n this.isCustomDate = options.isCustomDate;\n\n if (typeof options.alwaysShowCalendars === 'boolean')\n this.alwaysShowCalendars = options.alwaysShowCalendars;\n\n // update day names order to firstDay\n if (this.locale.firstDay != 0) {\n var iterator = this.locale.firstDay;\n while (iterator > 0) {\n this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());\n iterator--;\n }\n }\n\n var start, end, range;\n\n //if no start/end dates set, check if an input element contains initial values\n if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') {\n if(this.element.tagName === 'INPUT' && this.element.type === 'text'){\n var val = this.element.value,\n split = val.split(this.locale.separator);\n\n start = end = null;\n\n if (split.length == 2) {\n start = moment(split[0], this.locale.format);\n end = moment(split[1], this.locale.format);\n } else if (this.singleDatePicker && val !== \"\") {\n start = moment(val, this.locale.format);\n end = moment(val, this.locale.format);\n }\n if (start !== null && end !== null) {\n this.setStartDate(start);\n this.setEndDate(end);\n }\n }\n }\n\n if (typeof options.ranges === 'object') {\n let rangesKeys = Object.keys(options.ranges);\n for(let i = 0; i < rangesKeys.length; ++i){\n let range = rangesKeys[i];\n\n if (typeof options.ranges[range][0] === 'string')\n start = moment(options.ranges[range][0], this.locale.format);\n else\n start = moment(options.ranges[range][0]);\n\n if (typeof options.ranges[range][1] === 'string')\n end = moment(options.ranges[range][1], this.locale.format);\n else\n end = moment(options.ranges[range][1]);\n\n // If the start or end date exceed those allowed by the minDate or maxSpan\n // options, shorten the range to the allowable period.\n if (this.minDate && start.isBefore(this.minDate))\n start = this.minDate.clone();\n\n var maxDate = this.maxDate;\n if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))\n maxDate = start.clone().add(this.maxSpan);\n if (maxDate && end.isAfter(maxDate))\n end = maxDate.clone();\n\n // If the end of the range is before the minimum or the start of the range is\n // after the maximum, don't display this range option at all.\n if ((this.minDate && end.isBefore(this.minDate, this.timepicker ? 'minute' : 'day'))\n || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day')))\n continue;\n\n //Support unicode chars in the range names.\n var elem = document.createElement('textarea');\n elem.innerHTML = range;\n var rangeHtml = elem.value;\n\n this.ranges[rangeHtml] = [start, end];\n }\n\n var list = '
';\n for (range in this.ranges) {\n list += '
' + range + '
';\n }\n if (this.showCustomRangeLabel) {\n list += '
' + this.locale.customRangeLabel + '
';\n }\n list += '
';\n this.container.querySelector('.ranges').insertAdjacentHTML('afterbegin', list);\n }\n\n if (typeof cb === 'function') {\n this.callback = cb;\n }\n\n if (!this.timePicker) {\n this.startDate = this.startDate.startOf('day');\n this.endDate = this.endDate.endOf('day');\n this.container.style.display = 'none';\n this.container.querySelector('.calendar-time').display;\n }\n\n //can't be used together for now\n if (this.timePicker && this.autoApply)\n this.autoApply = false;\n\n if (this.autoApply) {\n this.container.classList.add('auto-apply');\n }\n\n if (typeof options.ranges === 'object')\n this.container.classList.add('show-ranges');\n\n if (this.singleDatePicker) {\n this.container.classList.add('single');\n\n this.container.querySelector('.drp-calendar.left').classList.add('single');\n this.container.querySelector('.drp-calendar.left').style.display = 'block';\n this.container.querySelector('.drp-calendar.right').style.display = 'none';\n if (!this.timePicker && this.autoApply) {\n this.container.classList.add('auto-apply');\n }\n }\n\n if ((typeof options.ranges === 'undefined' && !this.singleDatePicker) || this.alwaysShowCalendars) {\n this.container.classList.add('show-calendar');\n }\n\n this.container.classList.add('opens' + this.opens);\n\n //apply CSS classes and labels to buttons\n let applyBtnEl = this.container.querySelector('.applyBtn');\n let cancelBtnEl = this.container.querySelector('.cancelBtn');\n jq.addClass(applyBtnEl, this.buttonClasses);\n jq.addClass(cancelBtnEl, this.buttonClasses);\n if (this.applyButtonClasses.length)\n jq.addClass(applyBtnEl, this.applyButtonClasses);\n if (this.cancelButtonClasses.length)\n jq.addClass(cancelBtnEl, this.cancelButtonClasses);\n jq.html(applyBtnEl, this.locale.applyLabel);\n jq.html(cancelBtnEl, this.locale.cancelLabel);\n\n //\n // event listeners\n //\n /*\n -- Note: jquery can set event listner before the target element has not been build. Vanilla-JS set event listner LATER.--\n this.container.find('.drp-calendar')\n .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))\n .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))\n .on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this))\n .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this))\n .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this));\n --------------------------------------------------------------------------------------\n */\n\n this.clickRangeProxy = function (e) { this.clickRange(e); }.bind(this);\n jq.on(this.container.querySelector('.ranges'), 'click', 'li', this.clickRangeProxy);\n\n let drpButtonsEl = this.container.querySelector('.drp-buttons');\n this.clickApplyProxy = function (e) { this.clickApply(e); }.bind(this);\n jq.on(drpButtonsEl, 'click', 'button.applyBtn', this.clickApplyProxy);\n this.clickCancelProxy = function (e) { this.clickCancel(e); }.bind(this);\n jq.on(drpButtonsEl, 'click', 'button.cancelBtn', this.clickCancelProxy);\n\n if (this.element.tagName === 'INPUT' || this.element.tagName === 'BUTTON') {\n this.showProxy = function (e) { this.show(e); }.bind(this);\n jq.on(this.element, 'click', this.showProxy);\n jq.on(this.element, 'focus', this.showProxy);\n this.elementChangedProxy = function (e) { this.elementChanged(e); }.bind(this);\n jq.on(this.element, 'keyup', this.elementChangedProxy);\n this.keydownProxy = function (e) { this.keydown(e); }.bind(this); //IE 11 compatibility\n jq.on(this.element, 'keydown', this.keydownProxy);\n } else {\n this.toggleProxy = function (e) { this.toggle(e); }.bind(this);\n jq.on(this.element, 'click', this.toggleProxy);\n jq.on(this.element, 'keydown', this.toggleProxy);\n }\n\n //\n // if attached to a text input, set the initial value\n //\n\n this.updateElement();\n\n };\n\n DateRangePicker.prototype = {\n\n constructor: DateRangePicker,\n\n setStartDate: function(startDate) {\n if (typeof startDate === 'string')\n this.startDate = moment(startDate, this.locale.format);\n\n if (typeof startDate === 'object')\n this.startDate = moment(startDate);\n\n if (!this.timePicker)\n this.startDate = this.startDate.startOf('day');\n\n if (this.timePicker && this.timePickerIncrement)\n this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);\n\n if (this.minDate && this.startDate.isBefore(this.minDate)) {\n this.startDate = this.minDate.clone();\n if (this.timePicker && this.timePickerIncrement)\n this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);\n }\n\n if (this.maxDate && this.startDate.isAfter(this.maxDate)) {\n this.startDate = this.maxDate.clone();\n if (this.timePicker && this.timePickerIncrement)\n this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);\n }\n\n if (!this.isShowing)\n this.updateElement();\n\n this.updateMonthsInView();\n },\n\n setEndDate: function(endDate) {\n if (typeof endDate === 'string')\n this.endDate = moment(endDate, this.locale.format);\n\n if (typeof endDate === 'object')\n this.endDate = moment(endDate);\n\n if (!this.timePicker)\n this.endDate = this.endDate.endOf('day');\n\n if (this.timePicker && this.timePickerIncrement)\n this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);\n\n if (this.endDate.isBefore(this.startDate))\n this.endDate = this.startDate.clone();\n\n if (this.maxDate && this.endDate.isAfter(this.maxDate))\n this.endDate = this.maxDate.clone();\n\n if (this.maxSpan && this.startDate.clone().add(this.maxSpan).isBefore(this.endDate))\n this.endDate = this.startDate.clone().add(this.maxSpan);\n\n this.previousRightTime = this.endDate.clone();\n\n jq.html(this.container.querySelector('.drp-selected'), this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));\n\n if (!this.isShowing)\n this.updateElement();\n\n this.updateMonthsInView();\n },\n\n isInvalidDate: function() {\n return false;\n },\n\n isCustomDate: function() {\n return false;\n },\n\n updateView: function() {\n if (this.timePicker) {\n this.renderTimePicker('left');\n this.renderTimePicker('right');\n let selectElList = this.container.querySelectorAll('.right .calendar-time select');\n if (!this.endDate) {\n for (let i = 0; i < selectElList.length; ++i){\n selectElList[i].disabled = true;\n selectElList[i].classList.add('disabled');\n }\n } else {\n for (let i = 0; i < selectElList.length; ++i){\n selectElList[i].disabled = false;\n selectElList[i].classList.remove('disabled');\n }\n }\n }\n if (this.endDate)\n jq.html(this.container.querySelector('.drp-selected'), this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));\n this.updateMonthsInView();\n this.updateCalendars();\n this.updateFormInputs();\n },\n\n updateMonthsInView: function() {\n if (this.endDate) {\n\n //if both dates are visible already, do nothing\n if (!this.singleDatePicker && this.leftCalendar.month && this.rightCalendar.month &&\n (this.startDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.startDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM'))\n &&\n (this.endDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.endDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM'))\n ) {\n return;\n }\n\n this.leftCalendar.month = this.startDate.clone().date(2);\n if (!this.linkedCalendars && (this.endDate.month() != this.startDate.month() || this.endDate.year() != this.startDate.year())) {\n this.rightCalendar.month = this.endDate.clone().date(2);\n } else {\n this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');\n }\n\n } else {\n if (this.leftCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM') && this.rightCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM')) {\n this.leftCalendar.month = this.startDate.clone().date(2);\n this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month');\n }\n }\n if (this.maxDate && this.linkedCalendars && !this.singleDatePicker && this.rightCalendar.month > this.maxDate) {\n this.rightCalendar.month = this.maxDate.clone().date(2);\n this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month');\n }\n },\n\n updateCalendars: function() {\n\n if(!this.clickPrevProxy)\n this.clickPrevProxy = function (e) { this.clickPrev(e); }.bind(this);\n if(!this.clickNextProxy)\n this.clickNextProxy = function (e) { this.clickNext(e); }.bind(this);\n if(!this.clickDateProxy)\n this.clickDateProxy = function (e) { this.clickDate(e); }.bind(this);\n if(!this.hoverDateProxy)\n this.hoverDateProxy = function (e) { this.hoverDate(e); }.bind(this);\n if(!this.monthOrYearChangedProxy)\n this.monthOrYearChangedProxy = function (e) { this.monthOrYearChanged(e); }.bind(this);\n if(!this.timeChangedProxy)\n this.timeChangedProxy = function (e) { this.timeChanged(e); }.bind(this);\n\n /*\n -- Note: by jquery, we can set event listener before the target element has not been build. but we must remove event listener HERE by Vanilla-JS. --\n this.container.find('.drp-calendar')\n .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))\n .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))\n .on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this))\n .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this))\n .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this));\n --------------------------------------------------------------------------------------\n */\n let drpCalendarElList = this.container.querySelectorAll('.drp-calendar');\n jq.off(drpCalendarElList, 'click', '.prev', this.clickPrevProxy);\n jq.off(drpCalendarElList, 'click', '.next', this.clickNextProxy);\n jq.off(drpCalendarElList, 'mousedown', 'td.available', this.clickDateProxy);\n jq.off(drpCalendarElList, 'mouseenter', 'td.available', this.hoverDateProxy);\n jq.off(drpCalendarElList, 'change', 'select.yearselect', this.monthOrYearChangedProxy);\n jq.off(drpCalendarElList, 'change', 'select.monthselect', this.monthOrYearChangedProxy);\n jq.off(drpCalendarElList, 'change', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', this.timeChangedProxy);\n \n\n if (this.timePicker) {\n var hour, minute, second;\n if (this.endDate) {\n hour = parseInt(this.container.querySelector('.left .hourselect').value, 10);\n minute = parseInt(this.container.querySelector('.left .minuteselect').value, 10);\n if (isNaN(minute)) {\n minute = parseInt(jq.findLast(this.container.querySelector('.left .minuteselect')).value, 10);\n }\n second = this.timePickerSeconds ? parseInt(this.container.querySelector('.left .secondselect').value, 10) : 0;\n if (!this.timePicker24Hour) {\n var ampm = this.container.querySelector('.left .ampmselect').value;\n if (ampm === 'PM' && hour < 12)\n hour += 12;\n if (ampm === 'AM' && hour === 12)\n hour = 0;\n }\n } else {\n hour = parseInt(this.container.querySelector('.right .hourselect').value, 10);\n minute = parseInt(this.container.querySelector('.right .minuteselect').value, 10);\n if (isNaN(minute)) {\n minute = parseInt(jq.findLast(this.container.querySelector('.right .minuteselect')).value, 10);\n }\n second = this.timePickerSeconds ? parseInt(this.container.querySelector('.right .secondselect').value, 10) : 0;\n if (!this.timePicker24Hour) {\n var ampm = this.container.querySelector('.right .ampmselect').value;\n if (ampm === 'PM' && hour < 12)\n hour += 12;\n if (ampm === 'AM' && hour === 12)\n hour = 0;\n }\n }\n this.leftCalendar.month.hour(hour).minute(minute).second(second);\n this.rightCalendar.month.hour(hour).minute(minute).second(second);\n }\n\n this.renderCalendar('left');\n this.renderCalendar('right');\n\n //highlight any predefined range matching the current start and end dates\n rangesLiElList = this.container.querySelectorAll('.ranges li');\n for(let i = 0; i < rangesLiElList.length; ++i)\n rangesLiElList[i].classList.remove('active');\n\n if (this.endDate != null)\n this.calculateChosenLabel();\n \n /*\n -- Note: by jquery, we can set event listener before the target element has not been build. but we must set event listener HERE by Vanilla-JS. --\n this.container.find('.drp-calendar')\n .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))\n .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))\n .on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this))\n .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this))\n .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this))\n .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this));\n --------------------------------------------------------------------------------------\n */\n jq.on(drpCalendarElList, 'click', '.prev', this.clickPrevProxy);\n jq.on(drpCalendarElList, 'click', '.next', this.clickNextProxy);\n jq.on(drpCalendarElList, 'mousedown', 'td.available', this.clickDateProxy);\n jq.on(drpCalendarElList, 'mouseenter', 'td.available', this.hoverDateProxy);\n jq.on(drpCalendarElList, 'change', 'select.yearselect', this.monthOrYearChangedProxy);\n jq.on(drpCalendarElList, 'change', 'select.monthselect', this.monthOrYearChangedProxy);\n jq.on(drpCalendarElList, 'change', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', this.timeChangedProxy);\n \n },\n\n renderCalendar: function(side) {\n\n //\n // Build the matrix of dates that will populate the calendar\n //\n\n var calendar = side == 'left' ? this.leftCalendar : this.rightCalendar;\n var month = calendar.month.month();\n var year = calendar.month.year();\n var hour = calendar.month.hour();\n var minute = calendar.month.minute();\n var second = calendar.month.second();\n var daysInMonth = moment([year, month]).daysInMonth();\n var firstDay = moment([year, month, 1]);\n var lastDay = moment([year, month, daysInMonth]);\n var lastMonth = moment(firstDay).subtract(1, 'month').month();\n var lastYear = moment(firstDay).subtract(1, 'month').year();\n var daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth();\n var dayOfWeek = firstDay.day();\n\n //initialize a 6 rows x 7 columns array for the calendar\n var calendar = [];\n calendar.firstDay = firstDay;\n calendar.lastDay = lastDay;\n\n for (var i = 0; i < 6; i++) {\n calendar[i] = [];\n }\n\n //populate the calendar with date objects\n var startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1;\n if (startDay > daysInLastMonth)\n startDay -= 7;\n\n if (dayOfWeek == this.locale.firstDay)\n startDay = daysInLastMonth - 6;\n\n var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]);\n\n var col, row;\n for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) {\n if (i > 0 && col % 7 === 0) {\n col = 0;\n row++;\n }\n calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);\n curDate.hour(12);\n\n if (this.minDate && calendar[row][col].format('YYYY-MM-DD') == this.minDate.format('YYYY-MM-DD') && calendar[row][col].isBefore(this.minDate) && side == 'left') {\n calendar[row][col] = this.minDate.clone();\n }\n\n if (this.maxDate && calendar[row][col].format('YYYY-MM-DD') == this.maxDate.format('YYYY-MM-DD') && calendar[row][col].isAfter(this.maxDate) && side == 'right') {\n calendar[row][col] = this.maxDate.clone();\n }\n\n }\n\n //make the calendar object available to hoverDate/clickDate\n if (side == 'left') {\n this.leftCalendar.calendar = calendar;\n } else {\n this.rightCalendar.calendar = calendar;\n }\n\n //\n // Display the calendar\n //\n\n var minDate = side == 'left' ? this.minDate : this.startDate;\n var maxDate = this.maxDate;\n var selected = side == 'left' ? this.startDate : this.endDate;\n var arrow = this.locale.direction == 'ltr' ? {left: 'chevron-left', right: 'chevron-right'} : {left: 'chevron-right', right: 'chevron-left'};\n\n var html = '
';\n html += '';\n html += '
';\n\n // add empty cell for week number\n if (this.showWeekNumbers || this.showISOWeekNumbers)\n html += '
';\n\n if ((!minDate || minDate.isBefore(calendar.firstDay)) && (!this.linkedCalendars || side == 'left')) {\n html += '
';\n } else {\n html += '
';\n }\n\n var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(\" YYYY\");\n\n if (this.showDropdowns) {\n var currentMonth = calendar[1][1].month();\n var currentYear = calendar[1][1].year();\n var maxYear = (maxDate && maxDate.year()) || (this.maxYear);\n var minYear = (minDate && minDate.year()) || (this.minYear);\n var inMinYear = currentYear == minYear;\n var inMaxYear = currentYear == maxYear;\n\n var monthHtml = '\";\n\n var yearHtml = '';\n\n dateHtml = monthHtml + yearHtml;\n }\n\n html += '
' + dateHtml + '
';\n if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker)) {\n html += '
';\n } else {\n html += '
';\n }\n\n html += '
';\n html += '
';\n\n // add week number label\n if (this.showWeekNumbers || this.showISOWeekNumbers)\n html += '
' + this.locale.weekLabel + '
';\n\n for(let i = 0; i < this.locale.daysOfWeek.length; ++i){\n html += '
' + this.locale.daysOfWeek[i] + '
';\n }\n\n html += '
';\n html += '';\n html += '';\n\n //adjust maxDate to reflect the maxSpan setting in order to\n //grey out end dates beyond the maxSpan\n if (this.endDate == null && this.maxSpan) {\n var maxLimit = this.startDate.clone().add(this.maxSpan).endOf('day');\n if (!maxDate || maxLimit.isBefore(maxDate)) {\n maxDate = maxLimit;\n }\n }\n\n for (var row = 0; row < 6; row++) {\n html += '
';\n\n // add week number\n if (this.showWeekNumbers)\n html += '
' + calendar[row][0].week() + '
';\n else if (this.showISOWeekNumbers)\n html += '
' + calendar[row][0].isoWeek() + '
';\n\n for (var col = 0; col < 7; col++) {\n\n var classes = [];\n\n //highlight today's date\n if (calendar[row][col].isSame(new Date(), \"day\"))\n classes.push('today');\n\n //highlight weekends\n if (calendar[row][col].isoWeekday() > 5)\n classes.push('weekend');\n\n //grey out the dates in other months displayed at beginning and end of this calendar\n if (calendar[row][col].month() != calendar[1][1].month())\n classes.push('off', 'ends');\n\n //don't allow selection of dates before the minimum date\n if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day'))\n classes.push('off', 'disabled');\n\n //don't allow selection of dates after the maximum date\n if (maxDate && calendar[row][col].isAfter(maxDate, 'day'))\n classes.push('off', 'disabled');\n\n //don't allow selection of date if a custom function decides it's invalid\n if (this.isInvalidDate(calendar[row][col]))\n classes.push('off', 'disabled');\n\n //highlight the currently selected start date\n if (calendar[row][col].format('YYYY-MM-DD') == this.startDate.format('YYYY-MM-DD'))\n classes.push('active', 'start-date');\n\n //highlight the currently selected end date\n if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') == this.endDate.format('YYYY-MM-DD'))\n classes.push('active', 'end-date');\n\n //highlight dates in-between the selected dates\n if (this.endDate != null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate)\n classes.push('in-range');\n\n //apply custom classes for this date\n var isCustom = this.isCustomDate(calendar[row][col]);\n if (isCustom !== false) {\n if (typeof isCustom === 'string')\n classes.push(isCustom);\n else\n Array.prototype.push.apply(classes, isCustom);\n }\n\n var cname = '', disabled = false;\n for (var i = 0; i < classes.length; i++) {\n cname += classes[i] + ' ';\n if (classes[i] == 'disabled')\n disabled = true;\n }\n if (!disabled)\n cname += 'available';\n\n html += '
' + calendar[row][col].date() + '
';\n\n }\n html += '
';\n }\n\n html += '';\n html += '
';\n\n jq.html(this.container.querySelector('.drp-calendar.' + side + ' .calendar-table'), html);\n\n },\n\n renderTimePicker: function(side) {\n\n // Don't bother updating the time picker if it's currently disabled\n // because an end date hasn't been clicked yet\n if (side == 'right' && !this.endDate) return;\n\n var html, selected, minDate, maxDate = this.maxDate;\n\n if (this.maxSpan && (!this.maxDate || this.startDate.clone().add(this.maxSpan).isBefore(this.maxDate)))\n maxDate = this.startDate.clone().add(this.maxSpan);\n\n if (side == 'left') {\n selected = this.startDate.clone();\n minDate = this.minDate;\n } else if (side == 'right') {\n selected = this.endDate.clone();\n minDate = this.startDate;\n\n //Preserve the time already selected\n var timeSelector = this.container.querySelector('.drp-calendar.right .calendar-time');\n if (timeSelector.innerHTML != '') {\n selected.hour(!isNaN(selected.hour()) ? selected.hour() : jq.findSelectedOption(timeSelector.querySelector('.hourselect')).value);\n selected.minute(!isNaN(selected.minute()) ? selected.minute() : jq.findSelectedOption(timeSelector.querySelector('.minuteselect')).value);\n selected.second(!isNaN(selected.second()) ? selected.second() : jq.findSelectedOption(timeSelector.querySelector('.secondselect')).value);\n if (!this.timePicker24Hour) {\n var ampm = jq.findSelectedOption(timeSelector.querySelector('.ampmselect')).value;\n if (ampm === 'PM' && selected.hour() < 12)\n selected.hour(selected.hour() + 12);\n if (ampm === 'AM' && selected.hour() === 12)\n selected.hour(0);\n }\n\n }\n\n if (selected.isBefore(this.startDate))\n selected = this.startDate.clone();\n\n if (maxDate && selected.isAfter(maxDate))\n selected = maxDate.clone();\n\n }\n\n //\n // hours\n //\n\n html = ' ';\n\n //\n // minutes\n //\n\n html += ': ';\n\n //\n // seconds\n //\n\n if (this.timePickerSeconds) {\n html += ': ';\n }\n\n //\n // AM/PM\n //\n\n if (!this.timePicker24Hour) {\n html += '';\n }\n\n jq.html(this.container.querySelector('.drp-calendar.' + side + ' .calendar-time'), html);\n\n },\n\n updateFormInputs: function() {\n\n if (this.singleDatePicker || (this.endDate && (this.startDate.isBefore(this.endDate) || this.startDate.isSame(this.endDate)))) {\n this.container.querySelector('button.applyBtn').disabled = false;\n } else {\n this.container.querySelector('button.applyBtn').disabled = true;\n }\n\n },\n\n move: function() {\n var parentOffset = { top: 0, left: 0 },\n containerTop,\n drops = this.drops;\n\n var parentRightEdge = window.innerWidth;\n if (!(this.parentEl.tagName === 'BODY')) {\n let parentElOffset = jq.offset(this.parentEl);\n parentOffset = {\n top: parentElOffset.top - this.parentEl.scrollTop,\n left: parentElOffset.left - this.parentEl.scrollLeft\n };\n parentRightEdge = this.parentEl.clientWidth + parentElOffset.left;\n }\n\n /* Note: jquery this.container.outerHeight() returns non 0 even if not showing, but Vanilla-JS this.container.offsetHeight() returns 0 */\n let elementOffset = jq.offset(this.element);\n switch (drops) {\n case 'auto':\n containerTop = elementOffset.top + this.element.offsetHeight - parentOffset.top;\n if (containerTop + this.container.offsetHeight >= this.parentEl.scrollHeight) {\n containerTop = elementOffset.top - this.container.offsetHeight - parentOffset.top;\n drops = 'up';\n }\n break;\n case 'up':\n containerTop = elementOffset.top - this.container.offsetHeight - parentOffset.top;\n break;\n default:\n containerTop = elementOffset.top + this.element.offsetHeight - parentOffset.top;\n break;\n }\n\n // Force the container to it's actual width\n this.container.style.top = '0';\n this.container.style.left = '0';\n this.container.style.right = 'auto';\n var containerWidth = this.container.offsetWidth;\n\n if (drops == 'up')\n this.container.classList.add('drop-up');\n else\n this.container.classList.remove('drop-up');\n\n if (this.opens == 'left') {\n var containerRight = parentRightEdge - elementOffset.left - this.element.offsetWidth;\n if (containerWidth + containerRight > window.innerWidth) {\n this.container.style.top = containerTop + 'px';\n this.container.style.right = 'auto';\n this.container.style.left = '9px';\n } else {\n this.container.style.top = containerTop + 'px';\n this.container.style.right = containerRight + 'px';\n this.container.style.left = 'auto';\n }\n } else if (this.opens == 'center') {\n var containerLeft = elementOffset.left - parentOffset.left + this.element.offsetWidth / 2\n - containerWidth / 2;\n if (containerLeft < 0) {\n this.container.style.top = containerTop + 'px';\n this.container.style.right = 'auto';\n this.container.style.left = '9px';\n } else if (containerLeft + containerWidth > window.innerWidth) {\n this.container.style.top = containerTop + 'px';\n this.container.style.left = 'auto';\n this.container.style.right = '0';\n } else {\n this.container.style.top = containerTop + 'px';\n this.container.style.left = containerLeft + 'px';\n this.container.style.right = 'auto';\n }\n } else {\n var containerLeft = elementOffset.left - parentOffset.left;\n if (containerLeft + containerWidth > window.innerWidth) {\n this.container.style.top = containerTop + 'px';\n this.container.style.left = 'auto';\n this.container.style.right = '0';\n } else {\n this.container.style.top = containerTop + 'px';\n this.container.style.left = containerLeft + 'px';\n this.container.style.right = 'auto';\n }\n }\n },\n\n show: function(e) {\n if (this.isShowing) return;\n\n // Create a click proxy that is private to this instance of datepicker, for unbinding\n if(!this._outsideClickProxy)\n this._outsideClickProxy = function (e) { this.outsideClick(e); }.bind(this);\n\n // Bind global datepicker mousedown for hiding and\n document.addEventListener('mousedown', this._outsideClickProxy);\n // also support mobile devices\n document.addEventListener('touchend', this._outsideClickProxy);\n jq.on(document, 'click', '[data-toggle=dropdown]', this._outsideClickProxy);\n // and also close when focus changes to outside the picker (eg. tabbing between controls)\n document.addEventListener('focusin', this._outsideClickProxy);\n\n // Reposition the picker if the window is resized while it's open\n if(!this.moveProxy)\n this.moveProxy = function (e) { this.move(e); }.bind(this);\n window.addEventListener('resize', this.moveProxy);\n\n this.oldStartDate = this.startDate.clone();\n this.oldEndDate = this.endDate.clone();\n this.previousRightTime = this.endDate.clone();\n\n this.updateView();\n this.container.style.display = 'block';\n this.move();\n this.element.dispatchEvent(new CustomEvent('show.daterangepicker', {bubbles: true, detail: this}));\n this.isShowing = true;\n },\n\n hide: function(e) {\n if (!this.isShowing) return;\n\n //incomplete date selection, revert to last values\n if (!this.endDate) {\n this.startDate = this.oldStartDate.clone();\n this.endDate = this.oldEndDate.clone();\n }\n\n //if a new date range was selected, invoke the user callback function\n if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))\n this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);\n\n //if picker is attached to a text input, update it\n this.updateElement();\n\n if(this._outsideClickProxy){\n document.removeEventListener('mousedown', this._outsideClickProxy);\n document.removeEventListener('touchend', this._outsideClickProxy);\n jq.off(document, 'click', '[data-toggle=dropdown]', this._outsideClickProxy);\n document.removeEventListener('focusin', this._outsideClickProxy);\n }\n\n if(this.moveProxy)\n window.removeEventListener('resize', this.moveProxy);\n\n this.container.style.display = 'none';\n this.element.dispatchEvent(new CustomEvent('hide.daterangepicker', {bubbles: true, detail: this}));\n this.isShowing = false;\n },\n\n toggle: function(e) {\n if (this.isShowing) {\n this.hide();\n } else {\n this.show();\n }\n },\n\n outsideClick: function(e) {\n var target = e.target; \n // if the page is clicked anywhere except within the daterangerpicker/button\n // itself then call this.hide()\n if (\n // ie modal dialog fix\n e.type == \"focusin\" ||\n target.closest(jq.getSelectorFromElement(this.element)) ||\n target.closest(jq.getSelectorFromElement(this.container)) ||\n target.closest('.calendar-table')\n ) return;\n this.hide();\n this.element.dispatchEvent(new CustomEvent('outsideClick.daterangepicker', {bubbles: true, detail: this}));\n },\n\n showCalendars: function() {\n this.container.classList.add('show-calendar');\n this.move();\n this.element.dispatchEvent(new CustomEvent('showCalendar.daterangepicker', {bubbles: true, detail: this}));\n },\n\n hideCalendars: function() {\n this.container.classList.remove('show-calendar');\n this.element.dispatchEvent(new CustomEvent('hideCalendar.daterangepicker', {bubbles: true, detail: this}));\n },\n\n clickRange: function(e) {\n\n var label = e.target.dataset.rangeKey;\n this.chosenLabel = label;\n if (label == this.locale.customRangeLabel) {\n this.showCalendars();\n } else {\n var dates = this.ranges[label];\n this.startDate = dates[0];\n this.endDate = dates[1];\n\n if (!this.timePicker) {\n this.startDate.startOf('day');\n this.endDate.endOf('day');\n }\n\n if (!this.alwaysShowCalendars)\n this.hideCalendars();\n this.clickApply(e);\n }\n },\n\n clickPrev: function(e) {\n var cal = e.target.closest('.drp-calendar'); // Note: original use parents not closest.\n if (cal.classList.contains('left')) {\n this.leftCalendar.month.subtract(1, 'month');\n if (this.linkedCalendars)\n this.rightCalendar.month.subtract(1, 'month');\n } else {\n this.rightCalendar.month.subtract(1, 'month');\n }\n this.updateCalendars();\n },\n\n clickNext: function(e) {\n var cal = e.target.closest('.drp-calendar'); // Note: original use parents not closest.\n if (cal.classList.contains('left')) {\n this.leftCalendar.month.add(1, 'month');\n } else {\n this.rightCalendar.month.add(1, 'month');\n if (this.linkedCalendars)\n this.leftCalendar.month.add(1, 'month');\n }\n this.updateCalendars();\n },\n\n hoverDate: function(e) {\n\n //ignore dates that can't be selected\n if(!(e.target.classList.contains('available'))) return;\n\n var title = e.target.dataset.title;\n var row = title.substr(1, 1);\n var col = title.substr(3, 1);\n var cal = e.target.closest('.drp-calendar'); // Note: original use parents not closest.\n var date = cal.classList.contains('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];\n\n //highlight the dates between the start date and the date being hovered as a potential end date\n var leftCalendar = this.leftCalendar;\n var rightCalendar = this.rightCalendar;\n var startDate = this.startDate;\n if (!this.endDate) {\n let tdElList = this.container.querySelectorAll('.drp-calendar tbody td');\n for (let i = 0; i < tdElList.length; ++i) {\n //skip week numbers, only look at dates\n if(tdElList[i].classList.contains('week')) return;\n\n var title = tdElList[i].dataset.title;\n var row = title.substr(1, 1);\n var col = title.substr(3, 1);\n var cal = tdElList[i].closest('.drp-calendar'); // Note: original use parents not closest.\n var dt = cal.classList.contains('left') ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col];\n if ((dt.isAfter(startDate) && dt.isBefore(date)) || dt.isSame(date, 'day')) {\n tdElList[i].classList.add('in-range');\n } else {\n tdElList[i].classList.remove('in-range');\n }\n }\n }\n },\n\n clickDate: function(e) {\n \t\n if (!e.target.classList.contains('available')) return;\n\n var title = e.target.dataset.title;\n\n var row = title.substr(1, 1);\n var col = title.substr(3, 1);\n var cal = e.target.closest('.drp-calendar'); // Note: original use parents not closest.\n var date = cal.classList.contains('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];\n\n //\n // this function needs to do a few things:\n // * alternate between selecting a start and end date for the range,\n // * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date\n // * if autoapply is enabled, and an end date was chosen, apply the selection\n // * if single date picker mode, and time picker isn't enabled, apply the selection immediately\n // * if one of the inputs above the calendars was focused, cancel that manual input\n //\n\n if (this.endDate || date.isBefore(this.startDate, 'day')) { //picking start\n if (this.timePicker) {\n var hour = parseInt(this.container.querySelector('.left .hourselect').value, 10);\n if (!this.timePicker24Hour) {\n var ampm = this.container.querySelector('.left .ampmselect').value;\n if (ampm === 'PM' && hour < 12)\n hour += 12;\n if (ampm === 'AM' && hour === 12)\n hour = 0;\n }\n var minute = parseInt(this.container.querySelector('.left .minuteselect').value, 10);\n if (isNaN(minute)) {\n minute = parseInt(this.container.querySelector('.left .minuteselect option:last').value, 10);\n }\n var second = this.timePickerSeconds ? parseInt(this.container.querySelector('.left .secondselect').value, 10) : 0;\n date = date.clone().hour(hour).minute(minute).second(second);\n }\n this.endDate = null;\n this.setStartDate(date.clone());\n } else if (!this.endDate && date.isBefore(this.startDate)) {\n //special case: clicking the same date for start/end,\n //but the time of the end date is before the start date\n this.setEndDate(this.startDate.clone());\n } else { // picking end\n if (this.timePicker) {\n var hour = parseInt(this.container.querySelector('.right .hourselect').value, 10);\n if (!this.timePicker24Hour) {\n var ampm = this.container.querySelector('.right .ampmselect').value;\n if (ampm === 'PM' && hour < 12)\n hour += 12;\n if (ampm === 'AM' && hour === 12)\n hour = 0;\n }\n var minute = parseInt(this.container.querySelector('.right .minuteselect').value, 10);\n if (isNaN(minute)) {\n minute = parseInt(this.container.querySelector('.right .minuteselect option:last').value, 10);\n }\n var second = this.timePickerSeconds ? parseInt(this.container.querySelector('.right .secondselect').value, 10) : 0;\n date = date.clone().hour(hour).minute(minute).second(second);\n }\n this.setEndDate(date.clone());\n if (this.autoApply) {\n this.calculateChosenLabel();\n this.clickApply(e);\n }\n }\n\n if (this.singleDatePicker) {\n this.setEndDate(this.startDate);\n if (!this.timePicker && this.autoApply)\n this.clickApply(e);\n }\n\n this.updateView();\n\n //This is to cancel the blur event handler if the mouse was in one of the inputs\n e.stopPropagation();\n\n },\n\n calculateChosenLabel: function () {\n var customRange = true;\n let rangesKey = Object.keys(this.ranges);\n for (let i = 0; i < rangesKey.length; ++i) {\n let range = this.ranges[rangesKey[i]];\n if (this.timePicker) {\n var format = this.timePickerSeconds ? \"YYYY-MM-DD HH:mm:ss\" : \"YYYY-MM-DD HH:mm\";\n //ignore times when comparing dates if time picker seconds is not enabled\n if (this.startDate.format(format) == range[0].format(format) && this.endDate.format(format) == range[1].format(format)) {\n customRange = false;\n let rangesLiList = this.container.querySelectorAll('.ranges li');\n rangesLiList[i].classList.add('active');\n this.chosenLabel = rangesLiList[i].dataset.rangeKey;\n break;\n }\n } else {\n //ignore times when comparing dates if time picker is not enabled\n if (this.startDate.format('YYYY-MM-DD') == range[0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == range[1].format('YYYY-MM-DD')) {\n customRange = false;\n let rangesLiList = this.container.querySelectorAll('.ranges li');\n rangesLiList[i].classList.add('active');\n this.chosenLabel = rangesLiList[i].dataset.rangeKey;\n break;\n }\n }\n }\n if (customRange) {\n if (this.showCustomRangeLabel) {\n let rangesLiLastEl = jq.findLast(this.container.querySelectorAll('.ranges li'));\n if (rangesLiLastEl) {\n rangesLiLastEl.classList.add('active');\n this.chosenLabel = rangesLiLastEl.dataset.rangeKey;\n } else {\n this.chosenLabel = null;\n }\n } else {\n this.chosenLabel = null;\n }\n this.showCalendars();\n }\n },\n\n clickApply: function(e) {\n this.hide();\n e.target.dispatchEvent(new CustomEvent('apply.daterangepicker', {bubbles: true, detail: this}));\n },\n\n clickCancel: function(e) {\n this.startDate = this.oldStartDate;\n this.endDate = this.oldEndDate;\n this.hide();\n e.target.dispatchEvent(new CustomEvent('cancel.daterangepicker', {bubbles: true, detail: this}));\n },\n\n monthOrYearChanged: function(e) {\n var isLeft = e.target.closest('.drp-calendar').classList.contains('left'),\n leftOrRight = isLeft ? 'left' : 'right',\n cal = this.container.querySelector('.drp-calendar.'+leftOrRight);\n\n // Month must be Number for new moment versions\n var month = parseInt(cal.querySelector('.monthselect').value, 10);\n var year = cal.querySelector('.yearselect').value;\n\n if (!isLeft) {\n if (year < this.startDate.year() || (year == this.startDate.year() && month < this.startDate.month())) {\n month = this.startDate.month();\n year = this.startDate.year();\n }\n }\n\n if (this.minDate) {\n if (year < this.minDate.year() || (year == this.minDate.year() && month < this.minDate.month())) {\n month = this.minDate.month();\n year = this.minDate.year();\n }\n }\n\n if (this.maxDate) {\n if (year > this.maxDate.year() || (year == this.maxDate.year() && month > this.maxDate.month())) {\n month = this.maxDate.month();\n year = this.maxDate.year();\n }\n }\n\n if (isLeft) {\n this.leftCalendar.month.month(month).year(year);\n if (this.linkedCalendars)\n this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month');\n } else {\n this.rightCalendar.month.month(month).year(year);\n if (this.linkedCalendars)\n this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month');\n }\n this.updateCalendars();\n },\n\n timeChanged: function(e) {\n var cal = e.target.closest('.drp-calendar'),\n isLeft = cal.classList.contains('left');\n\n var hour = parseInt(cal.querySelector('.hourselect').value, 10);\n var minute = parseInt(cal.querySelector('.minuteselect').value, 10);\n if (isNaN(minute)) {\n minute = parseInt(jq.findLast(cal.querySelectorAll('.minuteselect option')).value, 10);\n }\n var second = this.timePickerSeconds ? parseInt(cal.querySelector('.secondselect').value, 10) : 0;\n\n if (!this.timePicker24Hour) {\n var ampm = cal.querySelector('.ampmselect').value;\n if (ampm === 'PM' && hour < 12)\n hour += 12;\n if (ampm === 'AM' && hour === 12)\n hour = 0;\n }\n\n if (isLeft) {\n var start = this.startDate.clone();\n start.hour(hour);\n start.minute(minute);\n start.second(second);\n this.setStartDate(start);\n if (this.singleDatePicker) {\n this.endDate = this.startDate.clone();\n } else if (this.endDate && this.endDate.format('YYYY-MM-DD') == start.format('YYYY-MM-DD') && this.endDate.isBefore(start)) {\n this.setEndDate(start.clone());\n }\n } else if (this.endDate) {\n var end = this.endDate.clone();\n end.hour(hour);\n end.minute(minute);\n end.second(second);\n this.setEndDate(end);\n }\n\n //update the calendars so all clickable dates reflect the new time component\n this.updateCalendars();\n\n //update the form inputs above the calendars with the new time\n this.updateFormInputs();\n\n //re-render the time pickers because changing one selection can affect what's enabled in another\n let drpCalendarElList = this.container.querySelectorAll('.drp-calendar');\n jq.off(drpCalendarElList, 'change', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', this.timeChangedProxy);\n\n this.renderTimePicker('left');\n this.renderTimePicker('right');\n\n jq.on(drpCalendarElList, 'change', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', this.timeChangedProxy);\n },\n\n elementChanged: function () {\n if(!(this.element.tagName === 'INPUT')) return;\n if(!this.element.value || !this.element.value.length) return;\n\n var dateString = this.element.value.split(this.locale.separator),\n start = null,\n end = null;\n\n if (dateString.length === 2) {\n start = moment(dateString[0], this.locale.format);\n end = moment(dateString[1], this.locale.format);\n }\n\n if (this.singleDatePicker || start === null || end === null) {\n start = moment(this.element.value, this.locale.format);\n end = start;\n }\n\n if (!start.isValid() || !end.isValid()) return;\n\n this.setStartDate(start);\n this.setEndDate(end);\n this.updateView();\n },\n\n keydown: function(e) {\n //hide on tab or enter\n if ((e.keyCode === 9) || (e.keyCode === 13)) {\n this.hide();\n }\n\n //hide on esc and prevent propagation\n if (e.keyCode === 27) {\n e.preventDefault();\n e.stopPropagation();\n\n this.hide();\n }\n },\n\n updateElement: function () {\n if (this.element.tagName === 'INPUT' && this.autoUpdateInput) {\n let newValue = this.startDate.format(this.locale.format);\n if (!this.singleDatePicker) {\n newValue += this.locale.separator + this.endDate.format(this.locale.format);\n }\n if (newValue !== this.element.value) {\n this.element.value = newValue;\n /* this.element.dispatchEvent(new Event('change')); Note: イベント？ */\n }\n }\n },\n\n remove: function() {\n\n if (this._outsideClickProxy) {\n // Bind global datepicker mousedown for hiding and\n document.removeEventListener('mousedown', this._outsideClickProxy);\n // also support mobile devices\n document.removeEventListener('touchend', this._outsideClickProxy);\n jq.off(document, 'click', '[data-toggle=dropdown]', this._outsideClickProxy);\n // and also close when focus changes to outside the picker (eg. tabbing between controls)\n document.removeEventListener('focusin', this._outsideClickProxy);\n delete this._outsideClickProxy;\n }\n if(this.moveProxy){\n window.addEventListener('resize', this.moveProxy);\n delete this.moveProxy;\n }\n if(this.clickRangeProxy){\n jq.off(this.container.querySelector('.ranges'), 'click', 'li', this.clickRangeProxy);\n delete this.clickRangeProxy;\n }\n let drpButtonsEl = this.container.querySelector('.drp-buttons');\n if(this.clickApplyProxy){\n jq.off(drpButtonsEl, 'click', 'button.applyBtn', this.clickApplyProxy);\n delete this.clickApplyProxy;\n }\n if(this.clickCancelProxy){\n jq.off(drpButtonsEl, 'click', 'button.cancelBtn', this.clickCancelProxy);\n delete this.clickCancelProxy;\n }\n if (this.element.tagName === 'INPUT' || this.element.tagName === 'BUTTON') {\n if(this.showProxy){\n jq.off(this.element, 'click', this.showProxy);\n jq.off(this.element, 'focus', this.showProxy);\n delete this.showProxy;\n }\n if(this.elementChangedProxy){\n jq.off(this.element, 'keyup', this.elementChangedProxy);\n delete this.elementChangedProxy;\n };\n if(this.keydownProxy){\n jq.off(this.element, 'keydown', this.keydownProxy);\n delete this.keydownProxy;\n }\n } else {\n if(this.toggleProxy){\n jq.off(this.element, 'click', this.toggleProxy);\n jq.off(this.element, 'keydown', this.toggleProxy);\n delete this.toggleProxy;\n };\n }\n let drpCalendarElList = this.container.querySelectorAll('.drp-calendar');\n if(this.clickPrevProxy){\n jq.off(drpCalendarElList, 'click', '.prev', this.clickPrevProxy);\n delete this.clickPrevProxy;\n }\n if(this.clickNextProxy){\n jq.off(drpCalendarElList, 'click', '.next', this.clickNextProxy);\n delete this.clickNextProxy;\n }\n if(this.clickDateProxy){\n jq.off(drpCalendarElList, 'mousedown', 'td.available', this.clickDateProxy);\n delete this.clickDateProxy;\n }\n if(this.hoverDateProxy){\n jq.off(drpCalendarElList, 'mouseenter', 'td.available', this.hoverDateProxy);\n delete this.hoverDateProxy;\n }\n if(this.monthOrYearChangedProxy){\n jq.off(drpCalendarElList, 'change', 'select.yearselect', this.monthOrYearChangedProxy);\n jq.off(drpCalendarElList, 'change', 'select.monthselect', this.monthOrYearChangedProxy);\n delete this.monthOrYearChangedProxy;\n }\n if(this.timeChangedProxy){\n jq.off(drpCalendarElList, 'change', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', this.timeChangedProxy);\n delete this.timeChangedProxy;\n }\n delete this.container;\n delete this.element.dataset;\n },\n\n updateRanges: function(newRanges){\n if (typeof newRanges === 'object') {\n jq.off(this.container.querySelector('.ranges'), 'click', 'li', this.clickRangeProxy);\n this.ranges = [];\n let rangesKeys = Object.keys(newRanges);\n for(let i = 0; i < rangesKeys.length; ++i){\n let range = rangesKeys[i];\n \n if (typeof newRanges[range][0] === 'string')\n start = moment(newRanges[range][0], this.locale.format);\n else\n start = moment(newRanges[range][0]);\n \n if (typeof newRanges[range][1] === 'string')\n end = moment(newRanges[range][1], this.locale.format);\n else\n end = moment(newRanges[range][1]);\n \n // If the start or end date exceed those allowed by the minDate or maxSpan\n // options, shorten the range to the allowable period.\n if (this.minDate && start.isBefore(this.minDate))\n start = this.minDate.clone();\n \n var maxDate = this.maxDate;\n if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))\n maxDate = start.clone().add(this.maxSpan);\n if (maxDate && end.isAfter(maxDate))\n end = maxDate.clone();\n \n // If the end of the range is before the minimum or the start of the range is\n // after the maximum, don't display this range option at all.\n if ((this.minDate && end.isBefore(this.minDate, this.timepicker ? 'minute' : 'day'))\n || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day')))\n continue;\n \n //Support unicode chars in the range names.\n var elem = document.createElement('textarea');\n elem.innerHTML = range;\n var rangeHtml = elem.value;\n \n this.ranges[rangeHtml] = [start, end];\n }\n \n var list = '
';\n for (range in this.ranges) {\n list += '
' + range + '
';\n }\n if (this.showCustomRangeLabel) {\n list += '