如何在 Timepicker 中的时间经过午夜后增加日期？

Question

我有一个 startDate 模型，我已绑定到 bootstrap 日期选择器和时间选择器。当我增加时间选择器中的时间并且午夜过去时，我需要让模型也增加它的日期。以下是我现有的代码。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope) {

  $scope.hstep = 1;
  $scope.mstep = 15;

  $scope.ismeridian = true;
  $scope.toggleMode = function() {
    $scope.ismeridian = !$scope.ismeridian;
  };

  $scope.today = function() {
    $scope.startDate = new Date();
  };

  $scope.startDateState = {
    opened: false
  }; /* Model to keep track if Popup is open */

  $scope.today(); /* Sets Date as Today Initially */
  $scope.showWeeks = false; /* Hides Week Numbers */
  $scope.minDate = new Date(); /* Disables past dates */
  $scope.format = 'dd MMM, yyyy'; /* Date Format Setting */
  $scope.dateOptions = {
    startingDay: 1,
    showWeeks: false,
  }; /* to be passed in the date-options directive */

  $scope.open = function() {
    $scope.startDateState.opened = true;
  }; /* Button Click Event to open Popup */

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="DatepickerDemoCtrl">
    <pre>Start date is: <em>{{startDate| date:"MM/dd/yyyy 'at' h:mma"}}</em></pre>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="startDate" is-open="startDateState.opened" on-open-focus="false" min-date="minDate" show-button-bar="false" datepicker-options="dateOptions" ng-required="true" />
          <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
        </p>
        <uib-timepicker ng-model="startDate" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
      </div>
    </div>
  </div>
</body>

</html>

如何解决这个问题？

Answer 1

阿卡什，

我解决这个问题的方法是在日期输入字段上使用 ng-change 指令。

HTML

<input ... ng-change="startDateChanged({{startDateTime}})"></input>

您会注意到传递给控制器作用域函数的参数是一个文字表达式。这样做的原因是我们可以比较 ng-model 日期对象在被时间选择器的向上或向下箭头修改之前的原始值。

控制器

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  var twelveAm = 0;
  var oneAm = 1;
  var elevenPm = 23;
  $scope.hStep = 1;
  $scope.mStep = 15;
  $scope.startDateTime = new Date();
  $scope.today = new Date();

  $scope.datePickerState = {
    startDateOpened: false
  };

  $scope.datePickerOptions = {
    "show-weeks": false
  };

  $scope.open = () => {
    $scope.datePickerState.startDateOpened = true;
  };

  $scope.startDateChanged = (originalModel) => {
    var nd = _.clone($scope.startDateTime);
    var od = new Date(originalModel);

    if (nd.getHours() === twelveAm) {
      if (od.getHours() === elevenPm) {
        nd.setDate(nd.getDate() + 1);
        $scope.startDateTime = nd;
      } else if (od.getHours() === oneAm) {
        nd.setDate(nd.getDate() - 1);
        $scope.startDateTime = nd;
      }
    }
  };
});

在方法 $scope.startDateChanged() 中，我首先创建了两个新的日期对象，一个保存原始日期时间（传入的表达式）的值，另一个保存新的日期时间。然后我检查新日期时间 (nd) 的值是否为上午 12 点。如果是这样，我然后检查原始日期时间 (od) 的值是否为晚上 11 点或凌晨 1 点，并采取相应行动（如果是晚上 11 点，这意味着我们按下的按钮是增加时间，因此增加日期，否则，我们将缩短时间，从今以后的日子）

我已经包含了一个 Plunker 来说明这个例子。

https://plnkr.co/edit/dDMfpXmy3JBEjXzOca9v

如何在 Timepicker 中的时间经过午夜后增加日期？

How to Increase Date after the time in Timepicker passes midnight?

javascript

timepicker

angularjs

angular-ui-bootstrap

bootstrap-datetimepicker