Format date on bootstrap datetimepicker

Question

I am using the Bootstrap 3 Date/Time Picker (https://github.com/Eonasdan/bootstrap-datetimepicker) and I have problems formatting the date

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

But the value is being display as MM/DD/YYYY hh:mm AM

i want 31-12-2017 23:59 for new year eve timestamp

This is my 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();
    }
  };
}
]);

Any ideas?

Try changing your format from format="DD-MM-YYYY hh:mm" to format="DD-MM-YYYY HH:mm". See the docs for more info. — user3366016
@Megajin not according to the docs for both angular and the datetimepicker. hh will display 12 hour clock. HH will display 24 hour clock. — user3366016
Sorry I've deleted my comment by accident. He said he is using the Bootstrap3 datetimepicker which acts differently from moment formats. You can take a look at this examples: eonasdan.github.io/bootstrap-datetimepicker — Megajin

Megajin Megajin · Accepted Answer · 2017-03-08T15:34:12

As shown in the bootstrap3 docs you can define custom formats in 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>

Even more simple:

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

Sidenote: Be careful with Date/Time formatting:

As for AngularJS HH format will result in hours as 00-23. While in Bootstrap3 which you are also using HH will result in hours as 01-12.

I highly suggest you to use a library like MomentJS which is doing the troublesome work for you.

Regards, Megajin

Format date on bootstrap datetimepicker

1 Answers