He pasado algún tiempo en la investigación de los existentes datetime directivas de angularjs.

Tanto ngularUI y AngularStrap no proporcionan un control datetimepicker como yo lo necesitaba. Por supuesto, sé que el uso de un selector de fecha y timepicker junto a archivar el propósito.

He buscado en las relacionadas con el tema de internet y de stackoverflow. Encontrar interesante y útil información.

http://dalelotts.github.io/angular-bootstrap-datetimepicker/, hay un datetimepicker, pero no me gusta el uso de la presente directiva.

la conexión de datetimepicker para angularjs , este tema es de mucha ayuda, he tratado de envolver mi datetimepicker directiva siguiendo los pasos.

Mi trabajo se basa en https://github.com/Eonasdan/bootstrap-datetimepicker, bootstrap 3 basado datetimepicker, la interfaz de usuario es muy agradable.

app.directive('datetimepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            console.log('call datetimepicker link...');
            var picker = element.datetimepicker({
                dateFormat: 'dd/MM/yyyy hh:mm:ss'
            });

            //ngModelCtrl.$setViewValue(picker.getDate());

            //model->view
            ngModelCtrl.$render(function() {
                console.log('[email protected]'+ngModelCtrl.$viewValue);
                picker.setDate(ngModelCtrl.$viewValue || '');
            });

            //view->model
            picker.on('dp.change', function(e) {
                console.log('dp.change'+e.date);              
                scope.$apply(function(){
                    ngModelCtrl.$setViewValue(e.date);
                });
            });
        }
    };
});

Y la uso en mi punto de vista.

<div class="col-md-6">
  <div class="input-group date" id="endTime" data-datetimepicker  ng-model="stat.endTime" data-date-format="MM/DD/YYYY hh:mm A/PM" >
    <input class="form-control" type="text" placeholder="End"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Hay algunos problemas que he encontrado.

  1. Si se fija la fecha a través de json antes de que se representan en la vista, la fecha inicial no ver, no puedo ver ninguna de registro de la ejecución de ngModel método render.
  2. Cuando elegí una fecha, consiguió una cadena datetime a los datos json, no un formato largo. Y en otros relacionados con el fragmento en la vista, la cadena de la fecha, no se analiza angular de la fecha de filtro.
  3. Cuando se utiliza en diálogo modal, su valor no se borra cuando la ventana modal es emergente en el momento siguiente.

Gracias de antemano.

OriginalEl autor Hantsy | 2014-03-29

7 Comentarios

  1. 4

    He tenido el mismo problema. Aquí es lo que acabé haciendo que funcionó bien para mí:

    'use strict';
    
    angular.module('frontStreetApp.directives')
        .directive('psDatetimePicker', function (moment) {
            var format = 'MM/DD/YYYY hh:mm A';
    
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, element, attributes, ctrl) {
                    element.datetimepicker({
                        format: format
                    });
                    var picker = element.data("DateTimePicker");
    
                    ctrl.$formatters.push(function (value) {
                        var date = moment(value);
                        if (date.isValid()) {
                            return date.format(format);
                        }
                        return '';
                    });
    
                    element.on('change', function (event) {
                        scope.$apply(function() {
                            var date = picker.getDate();
                            ctrl.$setViewValue(date.valueOf());
                        });
                    });
                }
            };
        });

    Aquí está el código HTML:

    <!-- The dueDate field is a UNIX offset of the date -->
    <input type="text"
           ng-model="dueDate"
           ps-datetime-picker
           class="form-control">

    Usted puede comprobar fuera de los gist y un poco más de información en mi blog.

    Gracias por tu respuesta. Una pequeña corrección : los corchetes ([]) no se encuentran en el módulo de la declaración (y no puedo editar el post a mí mismo debido a que la corrección es de menos de 6 caracteres..)
    en mi ejemplo, voy a agregar a un módulo existente, por lo que no hay []. Pero si yo fuese la creación del módulo en este ejemplo, entonces [] estaría en lo correcto.
    ¿Qué momento del error significa?Tengo un error, de momento. Tengo que agregar moment.js?

    OriginalEl autor cdmckay

  2. 1

    Batallé mucho con Eonasdan datetime selector de. La mayoría de las soluciones publicadas en la web funciona bien o no tan bien.

    Al final he fusionado algunas de las soluciones que he encontrado en línea. Me envolvió en un trabajo plunker: http://plnkr.co/n8L8UZ

    La directiva de obras utilizando ng-model en moment formato, lo que es más, se permite que dos funciones para ser aprobada:
    onDateChangeFunction y onDateClickFunction que se llaman respectivamente.

    Feliz de usar!


    La directiva de código fuente:

    angular
        .module('plunker')
        .directive('datetimepicker', [
          '$timeout',
          function($timeout) {
            return {
              require: '?ngModel',
              restrict: 'EA',
              scope: {
                datetimepickerOptions: '@',
                onDateChangeFunction: '&',
                onDateClickFunction: '&'
              },
              link: function($scope, $element, $attrs, controller) {
                $element.on('dp.change', function() {
                  $timeout(function() {
                    var dtp = $element.data('DateTimePicker');
                    controller.$setViewValue(dtp.date());
                    $scope.onDateChangeFunction();
                  });
                });
    
                $element.on('click', function() {
                  $scope.onDateClickFunction();
                });
    
                controller.$render = function() {
                  if (!!controller && !!controller.$viewValue) {
                    var result = controller.$viewValue;
                    $element.data('DateTimePicker').date(result);
                  }
                };
    
                $element.datetimepicker($scope.$eval($attrs.datetimepickerOptions));
              }
            };
          }
        ]);

    OriginalEl autor Atais

  3. 0

    Puede ayudar con el primer punto, agregar $watch a su elemento dentro de la función de enlace y establecer

     value="{{$scope.variableWithTheInitialDate}}" 

    en el campo de texto; de esa manera, cuando se carga, el datetimepicker será establecido ya.

    Para el segundo punto que me gustaría usar moment.js, pero no lo he probado tu ejemplo para decirle a usted cómo 😛
    Buena suerte!

    OriginalEl autor

  4. 0

    Una posible solución para el problema 1:

    Que usted tendrá que configurar el punto de vista del valor a la fecha en la que se encuentra en el modelo desde el principio, por hacer algo como esto:

    if (ngModel.$viewValue) {
    
      picker.data("DateTimePicker").setDate(new Date(ngModel.$modelValue));'
    
      picker.on('change', function(e) {
    
        ....
    
      });
    
    }

    OriginalEl autor Richard

  5. 0

    Para completar cdmckay la solución por lo que la datetime selector de control está correctamente inicializado con el ng-modelo del valor, he añadido un oyente en dp.show evento. Así que mi solución es :

    'use strict';
    
    angular.module('frontStreetApp.directives', [])
      .directive('psDatetimePicker', function (moment) {
          var format = 'MM/DD/YYYY hh:mm A';
    
          return {
              restrict: 'A',
              require: 'ngModel',
              link: function (scope, element, attributes, ctrl) {
                  element.datetimepicker({
                      format: format
                  });
                  var picker = element.data("DateTimePicker");
    
                  ctrl.$formatters.push(function (value) {
                      var date = moment(value);
                      if (date.isValid()) {
                          return date.format(format);
                      }
                      return '';
                  });
    
                  /**
                  * Update datetime picker's value from ng-model when opening the datetime picker's dropdown
                  */
                  element.on('dp.show', function() {
                      picker.setDate(ctrl.$viewValue);
                  });
    
                  /**
                  * Update ng-model when  datetime picker's value changes
                  */
                  element.on('change', function (event) {
                      scope.$apply(function () {
                          var date = picker.getDate();
                          ctrl.$setViewValue(date);
                      });
                  });
              }
          };
      });

    OriginalEl autor Siggen

  6. 0

    También estoy usando DateTimePicker por Angulares de la Directiva y se está trabajando muy bien aquí. He probado de esta manera:

    element.datetimepicker({
                            timepicker:false,
                            format:'Y-m-d', 
                            formatDate:'Y-m-d',
                            closeOnDateSelect: true,
                            onChangeDateTime: function(dp, $input){
                                var val = $input['context']['value'];  
                                ctrl.$setViewValue(val); 
                                ctrl.$render();  
                                scope.$apply(); 
                            } 
        //                 minDate:'-1970/01/02', //yesterday is minimum date
                            //maxDate:'+1970/01/02' //and tommorow is maximum date calendar
                        });

    OriginalEl autor Muhammad Mehdi Raza

  7. 0

    Terminé de poner la entrada dentro de un div y se unen modelo para que. También incluye bootstrapvalidator (lo Siento, no tengo tiempo para hacer que el código sea perfecto, pero usted debe tener una idea)

    Código html de ejemplo:

    <div datetimepicker="{pickTime: false}" data-ng-model="model.Birthday"><input type="text" name="Birthday" class="form-control" data-date-format="YYYY/MM/DD" data-mask="0000/00/00" data-bv-date="true" data-bv-date-format="YYYY/MM/DD" /></div>

    Y el código javascript:

    app.directive('datetimepicker', function ($timeout) {
    return {
    //Restrict it to be an attribute in this case
    restrict: 'AE',
    //optionally hook-in to ngModel's API 
    require: '?ngModel',
    //responsible for registering DOM listeners as well as updating the DOM
    link: function ($scope, element, $attrs, ngModel) {
    var $element;
    $timeout(function () {
    $element = $(element).find("input").datetimepicker($scope.$eval($attrs.datetimepicker));
    var DateTimePicker = $element.data("DateTimePicker");
    DateTimePicker.setValueAngular = function (newValue) {
    this.angularSetValue = true; //a lock object to prevent calling change trigger of input to fix the re-cursive call of changing values
    this.setDate(newValue);
    this.angularSetValue = false;
    }
    if (!ngModel) { return; }//below this we interact with ngModel's controller
    $scope.$watch($attrs['ngModel'], function (newValue) {
    if (newValue)
    if (newValue != "Invalid date")
    {
    DateTimePicker.setValueAngular(newValue);
    }
    });
    ngModel.$formatters.push(function (value) {
    //formatting the value to be shown to the user
    var format = DateTimePicker.format;
    var date = moment(value);
    if (date.isValid()) {
    return date.format(format);
    }
    return '';
    });
    ngModel.$parsers.push(function toModel(input) {
    //format user input to be used in code (converting to unix epoch or ...)
    var modifiedInput = moment(input).format();
    return modifiedInput;
    });
    //update ngModel when UI changes
    $element.on('dp.change', function (e) {
    if (DateTimePicker.angularSetValue === true)
    return;
    var newValue = $element[0].value;
    if (newValue !== ngModel.$viewValue)
    $scope.$apply(function () {
    ngModel.$setViewValue(newValue);
    });
    //bootstrapvalidator support
    if ($element.attr('data-bv-field') !== undefined) //if the field had validation
    $element.closest("form").bootstrapValidator('revalidateField', $element);
    });
    });
    }
    };
    }); //directive end

    OriginalEl autor mohghaderi

Dejar respuesta

Please enter your comment!
Please enter your name here