Question

我正在使用Bootstrap 3日期/时间选择器（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'});

旁注：注意日期/时间格式：

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

我强烈建议您使用像MomentJS这样的库，它正在为您做一些麻烦的工作。

此致 Megajin

在bootstrap datetimepicker上格式化日期

1 个答案: