2017-03-08 4 views
0

ich die Bootstrap 3 Date/Time Picker bin mit (https://github.com/Eonasdan/bootstrap-datetimepicker) und ich habe Probleme Formatierung das DatumFormat Datum auf Bootstrap-Datetime

<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"> 

Aber der Wert ist sein Display als MM/TT/JJJJ hh: mm AM

ich will 31-12-2017 23.59 für Silvester Zeitstempel

Dies ist meine Richtlinie

"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(); 
    } 
    }; 
} 
]); 

Irgendwelche Ideen?

+0

Versuchen Sie Ihr Format von 'format = Ändern "DD-MM-JJJJ hh: mm"' auf 'format = "DD-MM-YYYY HH: mm"'. Weitere Informationen finden Sie unter [docs] (https://docs.angularjs.org/api/ng/filter/date). – user3366016

+0

@Megajin nicht nach den Dokumenten für beide eckigen und der [datetimepicker] (http://momentjs.com/docs/#/displaying/format/). 'hh' zeigt die 12-Stunden-Uhr an. 'HH' zeigt die 24-Stunden-Uhr an. – user3366016

+0

Entschuldigung, ich habe meinen Kommentar versehentlich gelöscht. Er sagte, dass er den Bootstrap3 datetimepicker verwendet, der sich anders verhält als Momentformate. Sie können sich diese Beispiele ansehen: http://eonasdan.github.io/bootstrap-datetimepicker/ – Megajin

Antwort

0

Wie in den bootstrap3 docs gezeigt Sie benutzerdefinierte Formate in JavaScript definieren:

<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> 

Noch einfacher:

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

Nebenbei bemerkt: mit Datum/Uhrzeit Formatierung Vorsicht:

Wie für AngularJS HH Format wird Stunden als 00-23 ergeben. Während in Bootstrap3, die Sie auch verwenden, wird HH Stunden als 01-12 führen.

Ich empfehle Ihnen dringend, eine Bibliothek wie MomentJS zu verwenden, die die lästige Arbeit für Sie erledigt.

Grüße, Megajin

+0

Vielen Dank. Ich habe mir momentjs angeschaut und ich denke, ich werde den datetimepicker mit diesem Steuerelement statt https://indrimuska.github.io/angular-moment-picker/ ersetzen –