У меня есть форма, где есть необходимость, чтобы у меня было 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>
My 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 datepicker в 1.
2) Когда я удаляю атрибут is-open="opened", всплывающее окно работает нормально. Но без is-open="opened" кнопка ng-click="open($event) для кнопки не работает.
3) Поскольку каждое из полей даты имеет разные ng-модели, я не могу установить даты по умолчанию для любых полей даты, кроме первого с ng-model="formData.dt"
Единственный длинный способ разрешить это, о котором я могу думать, - отделить контроллер от каждого поля даты.
Я хотел бы знать, как другие реализуют несколько полей даты в самой 1 форме при использовании Angular UI Bootstrap.
