feat(md-datepicker): add advanced options and editable

chore(md-datepicker): add example of advanced options
aurelia-ui-toolkits · Jun 27, 2016 · 9bc8e9b · 9bc8e9b
1 parent f6982b0
commit 9bc8e9b
Show file tree

Hide file tree

Showing 74 changed files with 2,769 additions and 2,313 deletions.
diff --git a/dist/amd/aurelia-materialize-bridge.d.ts b/dist/amd/aurelia-materialize-bridge.d.ts
@@ -200,14 +200,6 @@ declare module 'aurelia-materialize-bridge' {
     isSelectedChanged(newValue: any): any;
   }
 
-  /* eslint-enable */
-  export class DarkenValueConverter {
-    toView(value: any, steps: any): any;
-  }
-  export class LightenValueConverter {
-    toView(value: any, steps: any): any;
-  }
-
   /**
    * Adds css classes to a given element only if these classes are not already
    * present. Keeps a record of css classes which actually have been added.
@@ -249,17 +241,25 @@ declare module 'aurelia-materialize-bridge' {
     value: any;
     selectMonths: any;
     selectYears: any;
+    options: any;
     constructor(element: any, taskQueue: any);
     bind(): any;
     detached(): any;
     onClose(): any;
+    onCalendarIconClick(event: any): any;
     onSet(value: any): any;
 
     // this.value = new Date(value.select);
     valueChanged(newValue: any): any;
   }
 
-  // });
+  /* eslint-enable */
+  export class DarkenValueConverter {
+    toView(value: any, steps: any): any;
+  }
+  export class LightenValueConverter {
+    toView(value: any, steps: any): any;
+  }
   export class MdDropdownElement {
     static id: any;
     alignment: any;

diff --git a/dist/amd/datepicker/datepicker.js b/dist/amd/datepicker/datepicker.js
@@ -55,9 +55,9 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
     throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
   }
 
-  var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+  var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6;
 
-  var MdDatePicker = exports.MdDatePicker = (_dec = (0, _aureliaDependencyInjection.inject)(Element, _aureliaTaskQueue.TaskQueue), _dec2 = (0, _aureliaTemplating.customAttribute)('md-datepicker'), _dec3 = (0, _aureliaTemplating.bindable)(), _dec4 = (0, _aureliaTemplating.bindable)(), _dec5 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.twoWay }), _dec6 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.oneTime }), _dec7 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.oneTime }), _dec(_class = _dec2(_class = (_class2 = function () {
+  var MdDatePicker = exports.MdDatePicker = (_dec = (0, _aureliaDependencyInjection.inject)(Element, _aureliaTaskQueue.TaskQueue), _dec2 = (0, _aureliaTemplating.customAttribute)('md-datepicker'), _dec3 = (0, _aureliaTemplating.bindable)(), _dec4 = (0, _aureliaTemplating.bindable)(), _dec5 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.twoWay }), _dec6 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.oneTime }), _dec7 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.oneTime }), _dec8 = (0, _aureliaTemplating.bindable)({ defaultBindingMode: _aureliaBinding.bindingMode.oneTime }), _dec(_class = _dec2(_class = (_class2 = function () {
     function MdDatePicker(element, taskQueue) {
       _classCallCheck(this, MdDatePicker);
 
@@ -71,6 +71,8 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
 
       _initDefineProp(this, 'selectYears', _descriptor5, this);
 
+      _initDefineProp(this, 'options', _descriptor6, this);
+
       this.element = element;
       this.log = (0, _aureliaLogging.getLogger)('md-datepicker');
       this.taskQueue = taskQueue;
@@ -82,6 +84,7 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
       this.selectMonths = (0, _attributes.getBooleanFromAttributeValue)(this.selectMonths);
       this.selectYears = parseInt(this.selectYears, 10);
       this.element.classList.add('date-picker');
+
       var options = {
         selectMonths: this.selectMonths,
         selectYears: this.selectYears,
@@ -92,6 +95,17 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
       var i18n = {};
 
       Object.assign(options, i18n);
+
+      if (this.options) {
+        Object.assign(options, this.options);
+
+        if (this.options.onClose) {
+          options.onClose = function () {
+            this.options.onClose();
+            $(document.activeElement).blur();
+          };
+        }
+      }
       if (this.container) {
         options.container = this.container;
       }
@@ -100,12 +114,36 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
         'close': this.onClose.bind(this),
         'set': this.onSet.bind(this)
       });
-      $(this.element).on('focusin', function () {
-        $(_this.element).pickadate('open');
-      });
+
       if (this.value) {
         this.picker.set('select', this.value);
       }
+      if (this.options && this.options.editable) {
+        $(this.element).on('keypress', function (e) {
+          if (e.keyCode === 13) {
+            var rawDate = $(_this.element).val();
+            if (rawDate) {
+              rawDate = rawDate.split('/').join('-');
+              var parsedDate = new Date(rawDate);
+              _this.picker.set('select', parsedDate);
+            } else {
+              _this.onCalendarIconClick();
+            }
+          }
+        });
+
+        this.element.classList.add('left');
+        var calendarIcon = document.createElement('i');
+        calendarIcon.classList.add('right');
+        calendarIcon.classList.add('material-icons');
+        calendarIcon.textContent = 'today';
+        this.element.parentNode.insertBefore(calendarIcon, this.element.nextSibling);
+        $(calendarIcon).on('click', this.onCalendarIconClick.bind(this));
+      } else {
+        $(this.element).on('focusin', function () {
+          $(_this.element).pickadate('open');
+        });
+      }
     };
 
     MdDatePicker.prototype.detached = function detached() {
@@ -119,7 +157,16 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
       this.value = selected ? selected.obj : null;
     };
 
-    MdDatePicker.prototype.onSet = function onSet(value) {};
+    MdDatePicker.prototype.onCalendarIconClick = function onCalendarIconClick(event) {
+      event.stopPropagation();
+      $(this.element).pickadate('open');
+    };
+
+    MdDatePicker.prototype.onSet = function onSet(value) {
+      if (this.options && this.options.closeOnSelect) {
+        this.picker.close();
+      }
+    };
 
     MdDatePicker.prototype.valueChanged = function valueChanged(newValue) {
       this.log.debug('selectedChanged', this.value);
@@ -147,5 +194,10 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
     initializer: function initializer() {
       return 15;
     }
+  }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'options', [_dec8], {
+    enumerable: true,
+    initializer: function initializer() {
+      return {};
+    }
   })), _class2)) || _class) || _class);
 });
diff --git a/dist/aurelia-materialize-bridge.d.ts b/dist/aurelia-materialize-bridge.d.ts
@@ -200,14 +200,6 @@ declare module 'aurelia-materialize-bridge' {
     isSelectedChanged(newValue: any): any;
   }
 
-  /* eslint-enable */
-  export class DarkenValueConverter {
-    toView(value: any, steps: any): any;
-  }
-  export class LightenValueConverter {
-    toView(value: any, steps: any): any;
-  }
-
   /**
    * Adds css classes to a given element only if these classes are not already
    * present. Keeps a record of css classes which actually have been added.
@@ -249,17 +241,25 @@ declare module 'aurelia-materialize-bridge' {
     value: any;
     selectMonths: any;
     selectYears: any;
+    options: any;
     constructor(element: any, taskQueue: any);
     bind(): any;
     detached(): any;
     onClose(): any;
+    onCalendarIconClick(event: any): any;
     onSet(value: any): any;
 
     // this.value = new Date(value.select);
     valueChanged(newValue: any): any;
   }
 
-  // });
+  /* eslint-enable */
+  export class DarkenValueConverter {
+    toView(value: any, steps: any): any;
+  }
+  export class LightenValueConverter {
+    toView(value: any, steps: any): any;
+  }
   export class MdDropdownElement {
     static id: any;
     alignment: any;