I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work.
This is my HTML sample:
<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 is:
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];
});
I implemented based on the sample here. The problem I have here is:
1) When one of the date field is clicked, the pop-up datepicker is messed up and seems to show 2 datepicker in 1.
2) When I remove is-open=opened attribute, the pop-up window seems to work fine. But without is-open=opened, the ng-click=open($event) for the button doesnt work.
3) Since each of the date fields have different ng-models, I am unable to set default dates for any date fields except for the first one with ng-model=formData.dt
The only long way to resolve this that I can think of is to separate the controller for each date field.
I would like to know how others implement multiple date fields in 1 form itself when using Angular UI Bootstrap.
