refactor(datepicker): move minDate, maxDate and filterDate to ngModelAttrs and bound them

Author: Kamil Kisiela

src/types/datepicker/datepicker.js

@@ -7,7 +7,18 @@ export default (formlyConfigProvider) => {
         wrapper: ['messages'],
         defaultOptions: {
             ngModelAttrs: {
-                placeholder: {attribute: 'md-placeholder'}
+                placeholder: {
+                    attribute: 'md-placeholder'
+                },
+                minDate: {
+                    bound: 'md-min-date'
+                },
+                maxDate: {
+                    bound: 'md-max-date'
+                },
+                filterDate: {
+                    bound: 'md-date-filter'
+                }
             }
         },
         apiCheck: (check) => ({
@@ -19,37 +30,4 @@ export default (formlyConfigProvider) => {
             }
         })
     });
-
-    formlyConfigProvider.templateManipulators.preWrapper.push((template, options) => {
-        if (angular.isDefined(options.templateOptions.minDate)
-            || angular.isDefined(options.templateOptions.maxDate)
-            || angular.isDefined(options.templateOptions.filterDate)) {
-
-            const dateConfig = {
-                min: options.templateOptions.minDate || undefined,
-                max: options.templateOptions.maxDate || undefined,
-                filter: options.templateOptions.filterDate || undefined
-            };
-            const node = document.createElement('div');
-
-            node.innerHTML = template;
-            const datepickerNode = node.querySelector('md-datepicker');
-
-            if (datepickerNode) {
-                if (dateConfig.min) {
-                    datepickerNode.setAttribute('md-min-date', 'to.minDate');
-                }
-                if (dateConfig.max) {
-                    datepickerNode.setAttribute('md-max-date', 'to.maxDate');
-                }
-                if (dateConfig.filter) {
-                    datepickerNode.setAttribute('md-date-filter', 'to.filterDate');
-                }
-            }
-            return node.innerHTML;
-        }
-
-
-        return template;
-    });
 }

tests/types/datepicker-spec.js

@@ -12,6 +12,10 @@ describe("formlyMaterial - datepicker type", () => {
     let form;
     let element;
     let field;
+    const minDate = new Date(2015, 10, 19);
+    const maxDate = new Date(2015, 11, 20);
+    const filterDate = () => true;
+
     //
     // helpers
     //
@@ -24,11 +28,9 @@ describe("formlyMaterial - datepicker type", () => {
             templateOptions: {
                 label: 'test field',
                 placeholder: "Pick a date",
-                minDate: new Date(2015, 11, 19),
-                maxDate: new Date(2015, 12, 20),
-                filterDate: (date) => {
-                    return true;
-                }
+                minDate: minDate,
+                maxDate: maxDate,
+                filterDate: filterDate
             }
         }, options)];
 
@@ -63,15 +65,24 @@ describe("formlyMaterial - datepicker type", () => {
     });
 
     it('should have min date', () => {
-        expect(element.attr('md-min-date')).toBe('to.minDate');
+        const scope = angular.element(element).scope();
+
+        expect(element.attr('md-min-date')).toBe("options.templateOptions['minDate']");
+        expect(scope.options.templateOptions.minDate.toDateString()).toBe(minDate.toDateString());
     });
 
     it('should have max date', () => {
-        expect(element.attr('md-max-date')).toBe('to.maxDate');
+        const scope = angular.element(element).scope();
+
+        expect(element.attr('md-max-date')).toBe("options.templateOptions['maxDate']");
+        expect(scope.options.templateOptions.maxDate.toDateString()).toBe(maxDate.toDateString());
     });
 
     it('should have date filter', () => {
-        expect(element.attr('md-date-filter')).toBe('to.filterDate');
+        const scope = angular.element(element).scope();
+
+        expect(element.attr('md-date-filter')).toBe("options.templateOptions['filterDate']");
+        expect(scope.options.templateOptions.filterDate).toBe(filterDate);
     });
 
 });