一起使用 angularjs ui bootstrap 日期选择器和时间选择器

Question

我正在尝试将 ui.bootstrap 时间选择器的值添加到输入（文本）中的日期，如下所示：

不确定我的代码缺少什么来实现它。

代码取自angularjs.ui.bootstrap

这是我的 plunker

谢谢

html

  <div ng-app="ui.bootstrap.demo">
    <div ng-controller="DatepickerDemoCtrl">

      <div class="form-group">

        <div class="col-md-6">
          <label for="appointment_start">Appointment datetime start:</label>
          <p class="input-group">
            <input type="date" id="appointment_start" name="appointment_start" class="form-control" readonly datepicker-popup ng-model="dt" is-open="status.opened" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
            close-text="Close" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
          </p>
        </div>

        <timepicker ng-model="dt" hour-step="1" minute-step="15" show-meridian="true">
        </timepicker>
      </div>

    </div><!-- ng-controller -->
  </div><!-- ng-app -->

js

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

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

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.enabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };


  $scope.open = function($event) {
    $scope.status.opened = true;
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

  $scope.status = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 2);
  $scope.events =
    [
      {
        date: tomorrow,
        status: 'full'
      },
      {
        date: afterTomorrow,
        status: 'partially'
      }
    ];

  $scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i=0;i<$scope.events.length;i++){
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  };

});

Answer 1

angular-ui 日期选择器需要在输入字段上输入 type="text"

<input type="text" .../>

以及从时间选择器中显示格式化日期和时间的正确格式。我在controller中把第一种格式调整为'dd-MMMM-yyyy hh:mm:ss'

$scope.formats = ['dd-MMMM-yyyy hh:mm:ss', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];

这是一个有效的 plunker。

一起使用 angularjs ui bootstrap 日期选择器和时间选择器

Using angularjs ui bootstrap datepicker and timepicker together

angularjs

angular-ui-bootstrap