date-picker v1

client/core/src/date-picker/date-picker.js

@@ -2,12 +2,13 @@ import {module as _module} from '../module';
 import * as resolveFactory from '../lib/resolveDefaultComponents';
 import * as normalizerFactory from '../lib/inputAttrsNormalizer';
 import * as util from '../lib/util';
+import Flatpickr from 'vendor/src/flatpickr';
 
 const _NAME = 'datePicker';
 export const NAME = util.getName(_NAME);
 
-directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
-export function directive(resolve, normalizer) {
+directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME, '$translate'];
+export function directive(resolve, normalizer, $translate) {
     return {
         restrict: 'E',
         template: function(_, attrs) {
@@ -15,12 +16,25 @@ export function directive(resolve, normalizer) {
             return resolve.getTemplate(_NAME, attrs);
         },
         link: function(scope, element, attrs) {
-            scope.$watch(attrs.model, () => {
-                let mdlField = element[0].firstChild.MaterialTextfield;
-                if (mdlField)
-                    mdlField.updateClasses_();
+            let input = element[0];
+            let vp;
+            let initOptions = {};
+
+            if (attrs.iniOpts)
+                initOptions = scope.$eval(attrs.iniOpts);
+
+            if (!initOptions.locale)
+                initOptions.locale = $translate.use();
+
+            if (!input.matches('input'))
+                input = input.querySelector('input');
+
+            if (input)
+                vp = new Flatpickr(input, initOptions);
+
+            element.on('$destroy', function() {
+                vp.destroy();
             });
-            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

client/production/src/filter-panel/filter-panel.html

@@ -2,7 +2,7 @@
     <form ng-submit="$ctrl.onSearch()">
         <vn-horizontal>
             <vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield>
-            <vn-textfield vn-one label="Fecha" model="$ctrl.filter.date"></vn-textfield>
+            <vn-date-picker vn-one label="Fecha" model="$ctrl.filter.date"></vn-date-picker>
         </vn-horizontal>
         <vn-horizontal>
              <vn-autocomplete vn-one
@@ -13,7 +13,7 @@
                     value-field="id"
                     label="Provincia">
                 </vn-autocomplete>
-            <vn-textfield vn-one label="Hora" model="$ctrl.filter.hour"></vn-textfield>
+            <vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true}" model="$ctrl.filter.hour"></n-date-picker>
         </vn-horizontal>
         <vn-horizontal>
             <vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check>

client/production/src/index/index.html

@@ -1,5 +1,5 @@
 <vn-card margin-large>
-   <mg-ajax path="" options="vnIndex"></mg-ajax>
+   <!--<mg-ajax path="" options="vnIndex"></mg-ajax>-->
    <vn-vertical pad-medium>
        <vn-horizontal vn-one>
             <vn-title vn-one><span translate>Localizador</span></vn-title>           

client/vendor/src/flatpickr.js

@@ -0,0 +1,6 @@
+import Flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
+import 'flatpickr/dist/themes/material_orange.css';
+import localeEs from 'flatpickr/dist/l10n/es';
+Flatpickr.l10ns.es = localeEs.es;
+export default Flatpickr;

package.json

@@ -15,6 +15,7 @@
     "angular-paging": "^2.2.2",
     "angular-translate": "^2.13.1",
     "angular-translate-loader-partial": "^2.13.1",
+    "flatpickr": "^2.6.3",
     "material-design-lite": "^1.3.0",
     "mg-crud": "^1.1.2",
     "oclazyload": "^0.6.3",