Merge branch 'develop'

unicef-polymer · Nov 21, 2016 · fc70e72 · fc70e72
2 parents 7e24472 + acc4485
commit fc70e72
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-datepicker",
   "description": "Polymer datepicker element",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "https://github.com/unicef-polymer/etools-datepicker/blob/master/LICENSE.md",
   "main": "etools-datepicker.html",
   "dependencies": {

diff --git a/demo/index.html b/demo/index.html
@@ -99,6 +99,17 @@ <h1>etools-datepicker demo</h1>
         </template>
       </demo-snippet>
 
+      <p>Datepickers with clear button</p>
+      <demo-snippet>
+        <template is="dom-bind">
+          <etools-datepicker-button pretty-date="{{prettyDate3}}" format="DD/MM/YYYY" show-clear-btn></etools-datepicker-button>
+          <span class="selected-date">Selected date: [[prettyDate3]]</span>
+          <br>
+          <etools-datepicker pretty-date="{{prettyDate4}}" format="DD/MM/YYYY" show-clear-btn></etools-datepicker>
+          <span class="selected-date">Selected date: [[prettyDate4]]</span>
+        </template>
+      </demo-snippet>
+
 
     </div>
 

diff --git a/etools-datepicker-button.html b/etools-datepicker-button.html
@@ -57,7 +57,7 @@
         properties: {
           prettyDate: {
             type: String,
-            value: null,
+            value: '',
             notify: true
           },
           date: {
@@ -67,7 +67,7 @@
           },
           jsonDate: {
             type: String,
-            value: null,
+            value: '',
             notify: true
           },
           format: {
@@ -88,6 +88,10 @@
           noInit: {
             type: Boolean,
             value: false
+          },
+          showClearBtn: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -120,7 +124,7 @@
 
         _openDatePicker: function (openDatePicker) {
           if (openDatePicker === true) {
-             this._showdatePicker();
+            this._showdatePicker();
           }
         },
 
@@ -133,6 +137,7 @@
           this.datePicker.isDisabled = this.isDisabled;
           this.datePicker.dynamicallyCreated = true;
           this.datePicker.noInit = this.noInit;
+          this.datePicker.showClearBtn = this.showClearBtn;
 
           if (this.date) {
             this.datePicker.date = this.date;
@@ -145,13 +150,21 @@
           }
 
           this.datePicker.addEventListener('date-selected', function(event) {
-            this.prettyDate = event.detail.prettyDate;
-            this.jsonDate = event.detail.jsonDate;
-            this.open = false;
+            this._updateProperties(event.detail);
+          }.bind(this));
+
+          this.datePicker.addEventListener('dismiss', function(event) {
+            this._updateProperties(event.detail);
           }.bind(this));
 
           Polymer.dom(document.querySelector('body')).appendChild(this.datePicker);
 
+        },
+
+        _updateProperties: function(detail) {
+          this.prettyDate = detail.prettyDate;
+          this.jsonDate = detail.jsonDate;
+          this.open = false;
         }
 
       });

diff --git a/etools-datepicker.html b/etools-datepicker.html
@@ -84,6 +84,7 @@
     <paper-dialog id="dialog" class="paper-date-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
       <paper-date-picker id="picker" date="[[date]]" min-date="[[minDate]]" max-date="[[maxDate]]"></paper-date-picker>
       <div class="buttons">
+        <paper-button on-tap="_clearSelectedDate" hidden$="[[!showClearBtn]]">Clear</paper-button>
         <paper-button dialog-dismiss>Cancel</paper-button>
         <paper-button dialog-confirm>OK</paper-button>
       </div>
@@ -100,12 +101,12 @@
         properties: {
           prettyDate: {
             type: String,
-            value: null,
+            value: '',
             notify: true
           },
           jsonDate: {
             type: String,
-            value: null,
+            value: '',
             notify: true
           },
           format: {
@@ -130,12 +131,16 @@
           noInit: {
             type: Boolean,
             value: false
+          },
+          showClearBtn: {
+            type: Boolean,
+            value: false
           }
         },
         ready: function () {
           setTimeout(function() {
             if (this.date instanceof Date === false || this.date.toString() === 'Invalid Date') {
-              this.date = new Date();
+              this.set('date', new Date());
             }
             if (!this.noInit) {
               this._updateDate();
@@ -160,17 +165,30 @@
           this.$.dialog.toggle();
         },
         dismissDialog: function (event) {
-          if (event.detail.confirmed) {
+          if (event.detail.canceled === false && event.detail.confirmed) {
             this.date = this.$.picker.date;
             this._updateDate();
+          } else {
+            this.$.picker.date = this.date;
+            this.fire('dismiss', {prettyDate: this.prettyDate, jsonDate: this.jsonDate});
           }
           event.stopPropagation();
         },
         _openDatePicker: function (openDatePicker) {
+          if (typeof this.date === 'undefined') {
+            this.$.picker.date = new Date();
+          }
           if (openDatePicker === true) {
             this.$.dialog.open();
             this.open = false;
           }
+        },
+
+        _clearSelectedDate: function() {
+          this.set('date', new Date());
+          this.set('prettyDate', '');
+          this.set('jsonDate', '');
+          this.$.dialog.cancel();
         }
 
       });