Merge pull request #21 from unicef-polymer/develop

Develop
unicef-polymer · Nov 19, 2020 · 24f12b7 · 24f12b7
2 parents bb69d3d + 072f503
commit 24f12b7
Show file tree

Hide file tree

Showing 5 changed files with 15,144 additions and 131 deletions.
diff --git 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
-* \<datepicker-lite\>
-* \<calendar-lite\>
-* \<time-input\>
+
+- \<datepicker-lite\>
+- \<calendar-lite\>
+- \<time-input\>
 
 ### Calendar component features
 
@@ -24,85 +28,125 @@ Polymer 3 components used for date and time fields.
 ```html
 <calendar-lite></calendar-lite>
 
-<calendar-lite  id="someid" 
-                disabled-week-day='["Fri","Sun"]' 
-                multi-select='{"max":3,"consequent":true}'>
+<calendar-lite id="someid" disabled-week-day='["Fri","Sun"]' multi-select='{"max":3,"consequent":true}'>
 </calendar-lite>
 ```
 
 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
-    <calendar-lite id="someid" disabled-week-day='["Fri","Sun"]'></calendar-lite>
+<calendar-lite id="someid" disabled-week-day='["Fri","Sun"]'></calendar-lite>
 ```
 
 You can disable a bunch of days by passing an array as shown below.
 
 ```html
-    <calendar-lite id="someid" disabled-days="[4,20,27]"></calendar-lite>
- ```
+<calendar-lite id="someid" disabled-days="[4,20,27]"></calendar-lite>
+```
 
 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
-    <calendar-lite id="someid" multi-select='{"max":3,"consequent":false}'  disabled-week-day='["Fri"]'  disabled-days="[2,3,4]">
-    </calendar-lite>
- ```
+<calendar-lite
+  id="someid"
+  multi-select='{"max":3,"consequent":false}'
+  disabled-week-day='["Fri"]'
+  disabled-days="[2,3,4]"
+>
+</calendar-lite>
+```
 
 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
-    <calendar-lite id="someid" min-date="2016,12,9" multi-select='{"max":3,"consequent":false}'  disabled-week-day='["Fri"]'  disabled-days="[2,3,4]">
-    </calendar-lite>
- ```
+<calendar-lite
+  id="someid"
+  min-date="2016,12,9"
+  multi-select='{"max":3,"consequent":false}'
+  disabled-week-day='["Fri"]'
+  disabled-days="[2,3,4]"
+>
+</calendar-lite>
+```
+
 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
-    <calendar-lite id="someid" date="01/07/2015">
-    </calendar-lite>
- ```
+<calendar-lite id="someid" date="01/07/2015"> </calendar-lite>
+```
 
 ### Time input component features
 
 Is a lite and simple time picker. The time-input uses 24h format input.
 
 ```html
-    <time-input label="Time picker" value="18:23">
-    </time-input>
+<time-input label="Time picker" value="18:23"> </time-input>
 ```
 
+### 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
+<calendar-lite></calendar-lite>
+
+<calendar-lite id="someid" max-date="[[getCurrentDate()]]" min-date="[[getMinDate()]]"> </calendar-lite>
+```
+
+input-date-format: datepicker works internally with date in format 'YYYY-MM-DD', in case input value has a different
+format, this format can be specified using this property
+
+selected-date-display-format: used to display selected date in
+a different format than default 'YYYY-MM-DD' Ex: other option would be 'D MMM YYYY'
+
+```html
+<datepicker-lite
+  class="start-date"
+  label="Start date"
+  value="{{data.start_date}}"
+  input-date-format="DD-MMM-YYYY"
+  selected-date-display-format="DD-MMM-YYYY"
+  error-message=""
+  required
+>
+</datepicker-lite>
+```
diff --git 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;