On my page, there is an option to edit a specific section by clicking on the "edit" button. This action opens a child view displaying all editable fields, including a datepicker bound to a modal.
The issue arises when I try to select a date from the calendar popup. The date in the textbox is not highlighted within the calendar itself. Consequently, I end up choosing a different date and closing the child view.
However, upon reopening the calendar popup for another item, the previously selected date is highlighted instead of the current one displayed in the textbox. This has been puzzling me for quite some time now. Below is the markup:
<div class="col-sm-4 ph-calendar">
<div class="input-group">
<input type="text"
id="duedate"
class="form-control"
datepicker-popup="{{dateFormat}}"
ng-model="milestone.duedate"
ph-validator="milestone.duedate"
ng-required="true"
is-open="datepickerOpenState.dueDateOpened"
datepicker-options="dateOptions"
ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones"
close-text="Close"
tooltip="dd/mm/yyyy"
tooltip-placement="bottom"
ph-datepicker-fix />
<span class="input-group-btn datepickerbtn">
<button type="button" class="btn btn-default" ng-click="openDatepicker($event, 'duedate')" ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
Here is a snippet of my JavaScript code as well:
$scope.openDatepicker = function ($event, dateType, date) {
$event.preventDefault();
$event.stopPropagation();
switch (dateType) {
case 'duedate':
$scope.datepickerOpenState.dueDateOpened = true;
$scope.datepickerOpenState.completionDateOpened = false;
$scope.datepickerOpenState.startDateOpened = false;
$scope.datepickerOpenState.endDateOpened = false;
break;
In addition, I perform some formatting for the datepicker in the following manner:
ngModelCtrl.$render = function () {
if (ngModelCtrl.$viewValue) {
ngModelCtrl.$viewValue = new Date(ngModelCtrl.$viewValue);
var dateVal = ngModelCtrl.$viewValue ? $filter('date')(ngModelCtrl.$viewValue, 'dd/MM/yyyy') : '';
$element.val(dateVal);
} else {
$element.val(null);
}
};