I am currently utilizing the date-range picker from https://github.com/fragaria/angular-daterangepicker and to showcase a calendar for selecting travel dates in my application. Depending on the type of flight chosen, I need either a date range for roundtrip flights or a single date for one-way flights. The issue I am facing is that the date object only gets updated upon selecting the end date, not the start date.
This is the controller function code snippet:
//oneTripDate Calendar controller
app.controller('OnewayPickerCtrl',['$scope','$rootScope', 'searchFactory',
function($scope, $rootScope, searchFactory) {
$rootScope.flyDates = { departureDate : '' };
$scope.onewaydate = {
startDate: searchFactory.search.searchparams.journeys[0].departuredate,
endDate: searchFactory.search.searchparams.journeys[0].returndate
};
$scope.opts = {
autoApply: true,
minDate: moment(),
startDate: moment(),
alwaysShowCalendars: true,
parentEl: '.cal-block .form-group',
autoUpdateInput: true,
singleDatePicker: true
};
//Watch for date changes
$scope.$watch('onewaydate', function(newDate) {
console.log('One Way model Changed');
searchFactory.search.searchparams.journeys[0].departuredate = moment(newDate.startDate).format("YYYY-MM-DD");
}, false);
}
]);
Below is where I have added the input field to enable the conversion to a datepicker:
<div data-ng-controller="OnewayPickerCtrl">
<input date-range-picker id="onewaydate" name="onewaydate" class="form-control date-picker" options="opts" type="text" value="" ng-model="onewaydate" required/>
</div>
Although I am monitoring changes in the model to capture any modifications and then applying the value to my factory, it seems to work flawlessly for date ranges because the change is detected upon the second selection. However, it does not function as expected when only a single selection is made. In essence, the watch event on onewaydate triggers only after the second selection.
If you have encountered this scenario before, I would greatly appreciate any insights or advice.