Question

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

＆＃13;

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 */

});

＆＃13;

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

＆＃13;

如何解决这个问题？

Answer 1

阿卡什，

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

<强> HTML

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

您会注意到传递给控制器范围函数的参数是文字表达式。这样做的原因是我们可以通过时间选择器中的向上或向下箭头来比较ng模型日期对象在修改之前的原始值。

<强>控制器

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（）中，我首先创建两个新的日期对象，一个保存原始日期时间（传入的表达式）的值，另一个保存新的日期时间。然后我检查新的datetime（nd）是否具有12 AM的值。如果是，我然后检查原始日期时间（od）是否具有11 PM或1 AM的值并且相应地采取行动（如果其下午11点，则表示我们推动的按钮是为了增加时间，因此当天，否则，我们正在缩短时间，从此开始这一天）

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

https://plnkr.co/edit/dDMfpXmy3JBEjXzOca9v

如何在Timepicker经过午夜之后增加日期？

1 个答案: