2017-03-08 1 views
0

J'utilise le Bootstrap 3 Date/heure Picker (https://github.com/Eonasdan/bootstrap-datetimepicker) et j'ai des problèmes formatage de la dateFormat date sur datetimepicker bootstrap

<input type="text" id="fmEndDate" class="form-control input-sm" 
          datetimepicker 
          format="DD-MM-YYYY hh:mm" 
          ng-model="workRequest.EndDate" 
          placeholder="..." 
          name="fmEndDate" 
          required        
          ng-disabled="isDisabled"> 

Mais la valeur est affichage MM/JJ/AAAA hh: mm AM

je veux 31-12-2017 23:59 pour la nouvelle année timestamp veille

Ceci est ma directive

"use strict"; 
angular.module("datetimepicker", []) 
.provider("datetimepicker", function() { 
    var defaultOptions = { }; 

this.setOptions = function (options) { 
    defaultOptions = options; 
}; 

this.$get = function() { 
    return { 
    getOptions: function() { 
     return defaultOptions; 
    } 
    }; 
}; 
}) 
.directive("datetimepicker", [ 
"$timeout", 
"datetimepicker", 
function ($timeout,datetimepicker) { 

    var defaultOptions = datetimepicker.getOptions(); 

    return { 
    require : "?ngModel", 
    restrict: "AE", 
    scope : { 
     datetimepickerOptions: "@" 
    }, 
    link : function ($scope, $element, $attrs, ngModelCtrl) { 
     var passedInOptions = $scope.$eval($attrs.datetimepickerOptions); 
     var options = jQuery.extend({}, defaultOptions, passedInOptions); 

     $element 
     .on("dp.change", function (e) { 
      if (ngModelCtrl) { 
      $timeout(function() { 
       ngModelCtrl.$setViewValue(e.target.value); 
      }); 
      } 
     }) 
     .datetimepicker(options); 

     function setPickerValue() { 
     var date = options.defaultDate || null; 

     if (ngModelCtrl && ngModelCtrl.$viewValue) { 
      date = ngModelCtrl.$viewValue; 
     } 

     $element 
      .data("DateTimePicker") 
      .date(date); 
     } 

     if (ngModelCtrl) { 
     ngModelCtrl.$render = function() { 
      setPickerValue(); 
     }; 
     } 

     setPickerValue(); 
    } 
    }; 
} 
]); 

Des idées?

+0

Essayez de changer le format de 'format = "JJ-MM-AAAA hh: mm"' 'au format = "JJ-MM-AAAA HH: mm"'. Voir les [docs] (https://docs.angularjs.org/api/ng/filter/date) pour plus d'informations. – user3366016

+0

@Megajin pas selon les docs pour angular et le [datetimepicker] (http://momentjs.com/docs/#/displaying/format/). 'hh' affichera 12 heures d'horloge. 'HH' affichera l'horloge 24 heures. – user3366016

+0

Désolé, j'ai supprimé mon commentaire par accident. Il a dit qu'il utilise le datetimepicker Bootstrap3 qui agit différemment des formats de moment. Vous pouvez jeter un oeil à cet exemple: http://eonasdan.github.io/bootstrap-datetimepicker/ – Megajin

Répondre

0

Comme le montre la bootstrap3 docs vous pouvez définir des formats personnalisés en JavaScript:

<div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker3'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-time"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker3').datetimepicker({ 
        format: 'your desired Formatting style' 
       }); 
      }); 
     </script> 
    </div> 
</div> 

Encore plus simple:

$("#fmEndDate").datetimepicker({format: 'dd-mm-yyyy hh:ii'}); 

Sidenote: Soyez prudent avec Date/formatage Heure:

Comme pour AngularJSLe formatdonnera des heures sous la forme 00-23. Alors que dans Bootstrap3 que vous utilisez également HH aura comme heures 01-12.

Je vous suggère fortement d'utiliser une bibliothèque comme MomentJS qui fait le travail pénible pour vous.

Cordialement, Megajin

+0

Merci. J'ai regardé momentjs et je pense que je vais remplacer le datetimepicker avec ce contrôle à la place https://indrimuska.github.io/angular-moment-picker/ –