Add datepicker with date range and filtering

Author: Kamil Kisiela

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- datepicker with date range and filtering _(currently in angular-material 1.0_RC4)_
+
 ## [0.2.0] - 2015-11-17
 ### Added
 - Support for textarea with cols and rows
@@ -37,6 +41,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## 0.0.1 - 2015-11-06
 
+[Unreleased]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.2.0...HEAD
 [0.2.0]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.0.4...v0.1.0
 [0.0.4]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.0.3...v0.0.4

lib/client/types/datepicker/datepicker.js

@@ -0,0 +1,58 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .config((formlyConfigProvider, formlyMaterialProvider) => {
+
+        formlyConfigProvider.setType({
+            name: 'datepicker',
+            templateUrl: formlyMaterialProvider.templateUrl('lib/client/types/datepicker/datepicker.ng.html'),
+            wrapper: ['mdMessages'],
+            defaultOptions: {
+                ngModelAttrs: {
+                    placeholder: {attribute: 'md-placeholder'}
+                }
+            },
+            apiCheck: (check) => ({
+                templateOptions: {
+                    placeholder: check.string.optional,
+                    minDate: check.instanceOf(Date).optional,
+                    maxDate: check.instanceOf(Date).optional,
+                    filterDate: check.func.optional
+                }
+            })
+        });
+
+        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;
+        });
+
+    });

lib/client/types/datepicker/datepicker.ng.html

@@ -0,0 +1,3 @@
+<div>
+    <md-datepicker ng-model="model[options.key]"></md-datepicker>
+</div>

package.js

@@ -86,7 +86,11 @@ Package.onUse(function (api) {
 
         // textarea
         'lib/client/types/textarea/textarea.js',
-        'lib/client/types/textarea/textarea.ng.html'
+        'lib/client/types/textarea/textarea.ng.html',
+        
+        // datepicker
+        'lib/client/types/datepicker/datepicker.js',
+        'lib/client/types/datepicker/datepicker.ng.html'
 
     ], client);