在引导日期时间选择器上格式化日期 [英] Format date on bootstrap datetimepicker

问题描述

我正在使用Bootstrap 3日期/时间选择器（ https://github.com/Eonasdan/ bootstrap-datetimepicker ），我在格式化日期时遇到问题

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

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

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

我想要除夕时间戳记2017年12月31日

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

这是我的指令

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

有什么想法吗？

推荐答案

如 bootstrap3文档所示，您可以在JavaScript中定义自定义格式：

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>

更简单：

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

---

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

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

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.

我强烈建议您使用像 MomentJS 这样的库，它会为您带来麻烦。

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

致谢，
Megajin

Regards, Megajin

这篇关于在引导日期时间选择器上格式化日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！