From d8846decab9bd381c76455896bed2ac3a954bd34 Mon Sep 17 00:00:00 2001 From: dcioara Date: Mon, 27 Apr 2020 16:32:42 +0300 Subject: [PATCH 1/5] [ch19940] Update datepicker-lite to support input value (date) in various formats. --- README.md | 108 ++++++++++++++++-------- datepicker-lite.d.ts | 50 +++++------ datepicker-lite.js | 191 ++++++++++++++++++++++++++----------------- package.json | 2 +- 4 files changed, 218 insertions(+), 133 deletions(-) diff --git a/README.md b/README.md index 465f593..4ebc7d8 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,20 @@ # Etools date and time fields + Polymer 3 components ## Install + `$ npm i --save @unicef-polymer/etools-date-time` ## Description + Polymer 3 components used for date and time fields. ### Components -* \ -* \ -* \ + +- \ +- \ +- \ ### Calendar component features @@ -24,85 +28,119 @@ Polymer 3 components used for date and time fields. ```html - + ``` You can attach date-change event listener to it as shown below ```javascript - // called whenever a user selects/change a date - document.querySelector('#someid').addEventListener('date-change', function (e) { - console.log(e.detail.date); //update input values... - }) +// called whenever a user selects/change a date +document.querySelector('#someid').addEventListener('date-change', function (e) { + console.log(e.detail.date); //update input values... +}); ``` You can disable week days by passing an array as shown below. + ```html - + ``` You can disable a bunch of days by passing an array as shown below. ```html - - ``` + +``` Here you may get a doubt that "How to disable different dates for different months?" Answer is, you can update the disable dates on `month-change` event as shown below. ```javascript - document.querySelector('#someid').addEventListener('month-change', function (e) { - //takecare month numbering starts from 0 - if(e.detail.date.getMonth() == 4){ - document.querySelector('#someid').disabledDays = [1] - }else{ - document.querySelector('#someid').disabledDays = [7,8] - } - }) +document.querySelector('#someid').addEventListener('month-change', function (e) { + //takecare month numbering starts from 0 + if (e.detail.date.getMonth() == 4) { + document.querySelector('#someid').disabledDays = [1]; + } else { + document.querySelector('#someid').disabledDays = [7, 8]; + } +}); ``` You can select multiple days by passing an Object to `multi-select` attribute as shown below. ```html - - - ``` + + +``` To get the selected multiple dates, use below listener ```javascript - document.querySelector('#excalendar').addEventListener('multiselect', function (e) { - console.log(e.detail.dates); // array of selected dates - }) +document.querySelector('#excalendar').addEventListener('multiselect', function (e) { + console.log(e.detail.dates); // array of selected dates +}); ``` In Object multi-select: `max` is nothing but maximum number of days that can be selected, if `consequent` is true it will select the days in consequent. you can provide min and max dates, such that calendar-lite will disable the remaining dates. + ```html - - - ``` + + +``` + min-date and max-date format should be yyyy-mm-dd. By default present(today) day is selected, you can set a default date as shown below ```html - - - ``` + +``` ### Time input component features Is a lite and simple time picker. The time-input uses 24h format input. ```html - - + ``` +### Datepicker-lite component features + +Is a lite and simple date picker. + +1. Set min, max date or default date, +2. Set date input format and/or selected date display format +```html + + + +``` + +```html + + +``` diff --git a/datepicker-lite.d.ts b/datepicker-lite.d.ts index 8f80dde..5256f96 100644 --- a/datepicker-lite.d.ts +++ b/datepicker-lite.d.ts @@ -18,30 +18,32 @@ import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-l declare class DatePickerLite extends GestureEventListeners( - PolymerElement) { - value: string|null|undefined; - readonly: boolean|null|undefined; - required: boolean|null|undefined; - errorMessage: string|null|undefined; - disabled: boolean|null|undefined; - label: string|null|undefined; - monthInput: number|null|undefined; - dayInput: number|null|undefined; - yearInput: number|null|undefined; - invalid: boolean|null|undefined; - inputDate: Date|null|undefined; - opened: boolean|null|undefined; - clearBtnInsideDr: boolean|null|undefined; - closeOnSelect: boolean|null|undefined; - _clearDateInProgress: boolean|null|undefined; - _stopDateCompute: boolean|null|undefined; - autoValidate: boolean|null|undefined; - minDate: Date|null|undefined; - maxDate: Date|null|undefined; - fireDateHasChanged: boolean|null|undefined; - minDateErrorMsg: string|null|undefined; - maxDateErrorMsg: string|null|undefined; - requiredErrorMsg: string|null|undefined; + PolymerElement) { + value: string | null | undefined; + readonly: boolean | null | undefined; + required: boolean | null | undefined; + errorMessage: string | null | undefined; + disabled: boolean | null | undefined; + label: string | null | undefined; + monthInput: number | null | undefined; + dayInput: number | null | undefined; + yearInput: number | null | undefined; + invalid: boolean | null | undefined; + inputDate: Date | null | undefined; + opened: boolean | null | undefined; + clearBtnInsideDr: boolean | null | undefined; + closeOnSelect: boolean | null | undefined; + _clearDateInProgress: boolean | null | undefined; + _stopDateCompute: boolean | null | undefined; + autoValidate: boolean | null | undefined; + minDate: Date | null | undefined; + maxDate: Date | null | undefined; + fireDateHasChanged: boolean | null | undefined; + minDateErrorMsg: string | null | undefined; + maxDateErrorMsg: string | null | undefined; + requiredErrorMsg: string | null | undefined; + selectedDateDisplayFormat: string | null | undefined; + inputDateFormat: string | null | undefined; connectedCallback(): void; _getDateString(date: any): any; datePicked(event: any): void; diff --git a/datepicker-lite.js b/datepicker-lite.js index 4170075..71a2046 100644 --- a/datepicker-lite.js +++ b/datepicker-lite.js @@ -12,9 +12,9 @@ if (!moment) { throw new Error('DatepickerLite: momentjs is not loaded'); } - var openedDatepickerLiteElems = window.openedDatepickerLiteElems || []; var openedDatepickerLiteElemsCloseTimeout = window.openedDatepickerLiteElemsCloseTimeout || null; +const controlFormat = 'YYYY-MM-DD'; const _closeDatepickers = (keepOpenDatepicker) => { openedDatepickerLiteElems.forEach((datePicker) => { @@ -23,17 +23,15 @@ const _closeDatepickers = (keepOpenDatepicker) => { } }); - openedDatepickerLiteElems = (keepOpenDatepicker && keepOpenDatepicker.opened) - ? [{keepOpen: false, calendar: keepOpenDatepicker}] - : []; + openedDatepickerLiteElems = + keepOpenDatepicker && keepOpenDatepicker.opened ? [{keepOpen: false, calendar: keepOpenDatepicker}] : []; }; const _getClickedDatepicker = (e) => { - let clickedDatepicker = (e.target.tagName.toLowerCase() === 'datepicker-lite') - ? e.target - : e.target.closest('datepicker-lite'); + let clickedDatepicker = + e.target.tagName.toLowerCase() === 'datepicker-lite' ? e.target : e.target.closest('datepicker-lite'); if (!clickedDatepicker) { - const openedDatepikerMap = openedDatepickerLiteElems.find(d => d.keepOpen === true); + const openedDatepikerMap = openedDatepickerLiteElems.find((d) => d.keepOpen === true); if (openedDatepikerMap && openedDatepikerMap.keepOpen) { clickedDatepicker = openedDatepikerMap.calendar; } @@ -68,7 +66,6 @@ class DatePickerLite extends GestureEventListeners(PolymerElement) { // language=HTML return html` - - - - + + + +
-
- -