0

有没有办法在不实际设置日期选择器的值的情况下打开特定月份的日历。

例如，我有两个日期选择器，一个是开始日期，一个是结束日期。正如这里的小提琴所示：http: //jsfiddle.net/leopardy/ao4nnd7d/

如果用户为开始日历选择了一天，例如 2016 年 5 月 12 日，那么我希望结束日历在用户打开日历时打开到 5 月。但是，我不想在他们身上强加任何特定的日期，所以我不想设置日历的实际值。如果用户不想要 May，他们可以选择导航到另一个月份。这只是一个初始的起点。

有没有办法做到这一点？谢谢。

HTML

<div ng-controller="DatepickerDemoCtrl">
    <div class="row">
      <label>Start</label>
        <div class="col-md-6">
            <div class="input-group">
              <input
                type="text"
                id="popup"
                class="form-control"
                datepicker-popup=""
                ng-model="date1"
                is-open="opened"
                min-date="minDate"
                max-date="'2015-12-22'"
                ng-click="open()"/>
              <span class="input-group-btn">
                <label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
              </span>
            </div>
        </div>
    </div>
    <div class="row">
      <label>End</label>
        <div class="col-md-6">
            <div class="input-group">
              <input
                type="text"
                id="popup"
                class="form-control"
                datepicker-popup=""
                ng-model="date2"
                is-open="opened"
                min-date="minDate"
                max-date="'2015-12-22'"
                ng-click="open()"/>
              <span class="input-group-btn">
                <label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
              </span>
            </div>
        </div>
    </div>
</div>

Javascript

angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerDemoCtrl', function ($scope, $filter) {
  $scope.date1 = null;
  $scope.date2 = null;
  $scope.minDate = new Date();
  $scope.open = function() {
    $scope.opened = true;
  };
})

.constant('datepickerPopupConfig', {
  datepickerPopup: "MMM d, yyyy",
  closeOnDateSelection: true,
  appendToBody: false,
  showButtonBar: false
})

.constant('datepickerConfig', {
  formatDay: 'dd',
  formatMonth: 'MMMM',
  formatYear: 'yyyy',
  formatDayHeader: 'EEE',
  formatDayTitle: 'MMMM yyyy',
  formatMonthTitle: 'yyyy',
  datepickerMode: 'day',
  minMode: 'day',
  maxMode: 'year',
  showWeeks: false,
  startingDay: 0,
  yearRange: 20,
  minDate: null,
  maxDate: null
})
4

1 回答 1

2

有init-date选项。

init-date：未指定模型值时的初始日期视图。

http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/#/datepicker

$scope.initDate = new Date(2016, 4, 1);  // May 1

<uib-datepicker
  ng-date="date1"
  min-date="minDate"
  show-weeks="true"
  init-date="initDate"
  class="well well-sm"></uib-datepicker>
于 2016-01-25T19:16:21.943 回答