在 bootstrap 日期时间选择器上格式化日期

Question

我正在使用 Bootstrap 3 Date/Time 选择器 (https://github.com/Eonasdan/bootstrap-datetimepicker) 我遇到了问题格式化日期

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

但该值显示为 MM/DD/YYYY hh:mm AM

我想要 31-12-2017 23:59 作为除夕时间戳

这是我的指令

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

有什么想法吗？

Answer 1

如 bootstrap3 docs 所示，您可以在 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>

更简单：

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

旁注：注意 Date/Time 格式：

至于AngularJS HH 格式将导致小时为00-23。在您也使用 HH 的 Bootstrap3 中，小时数为 01-12.

我强烈建议您使用像 MomentJS 这样的库，它可以为您完成麻烦的工作。

此致，巨人

在 bootstrap 日期时间选择器上格式化日期

Format date on bootstrap datetimepicker

javascript

date

angularjs

bootstrap-datetimepicker