Как использовать несколько Angular UI Bootstrap Datepicker в одной форме?
У меня есть форма, где мне нужно иметь 2 или более полей даты для разных вещей. Я попробовал Angular UI Bootstrap, который отлично работает, когда у меня есть только 1 поле даты в форме. Но он перестает работать, если у меня есть несколько полей даты, и я не знаю более простой способ заставить это работать.
Это мой пример HTML:
<label>First Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<label>Second Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
Мой JS это:
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.today = function() {
$scope.formData.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
});
Я реализовал на основе образцаВот, Проблема, которую я имею здесь:
1) При щелчке по одному из полей даты во всплывающем окне выбора даты появляется сообщение «Похоже, что 2 выбора даты в 1».
2) Когда я удаляюis-open="opened"
атрибут, всплывающее окно, кажется, работает нормально. Но безis-open="opened"
,ng-click="open($event)
для кнопки не работает.
3) Поскольку каждое из полей даты имеет разные ng-модели, я не могу установить даты по умолчанию для любых полей даты, кроме первого сng-model="formData.dt"
Единственный длинный способ решить эту проблему, о котором я могу подумать, - это выделить контроллер для каждого поля даты.
Я хотел бы знать, как другие реализуют несколько полей даты в одной форме при использовании Angular UI Bootstrap.