Updating Date on startDate selection in angular-daterangepicker

Question

I am using https://github.com/fragaria/angular-daterangepicker and http://www.daterangepicker.com/ to display a date-range picker inline. Based on the type of flight selected in my app, I either require a date-range for travel dates, or a single date for a oneway flight. The date object only seems to update however on the endDate selection - the second selection. This is an issue, as I really don't know how to set the startDate on the first selection.

my controller function

//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);
}
]);

And this is where I include the input to be converted to the 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>

As you can see I am watching the model to detect changes and then apply the value to my factory. This works a treat for date ranges, due to the 2nd selection being made, however it does not work on only one selection. In short, watching onewaydate only fires on the second selection.

Does anyone have experience with this scenario?

Answer 1

The issue is that he Single Date picker does not "close" when it is forced to be inline. This means that the model does not update, or only once on initial selection. The second selection is never picked up, hence the $watch function does not fire.

my solution to this is as follows and now works

    $scope.optsOneway = {
        minDate: moment(),
        maxDate: moment(new Date().setFullYear(new Date().getFullYear() + 1)),
        autoUpdateInput: true,
        autoapply: true,
        singleDatePicker: true,
        parentEl: '.cal-block .form-group .oneway',
        eventHandlers: {
            'apply.daterangepicker': function(ev, picker) { 
                angular.element('#onewaydate').triggerHandler('click'); //one way calendar
            }
        }
    };


   //Watch for date changes
    $scope.$watch('onewayDate', function(newDate) {
        searchFactory.search.searchparams.journeys[0].departuredate = moment(newDate).format("YYYY-MM-DD");
        angular.element('#onewaydate').triggerHandler('click'); //one way calendar
    }, false);

I guess this is very hacky, but essentially I re-trigger the datepicker when ever a value is assigned. It would seem this particular Datepicker is not built for the use we are throwing at it.

I hope this might help someone.

Cheers,

Answer 2

I also had encountered this kind of problem somewhere, but in your case if you can share a fiddle for it then it will be easy to debug.

I went through the library and I found something very helpful for you:

https://github.com/fragaria/angular-daterangepicker/blob/master/js/angular-daterangepicker.js

line 155:

$scope.$watch('model.startDate', function(n) {
         //some event
          return _setStartDate(n);
        });

You can emit an event from here, and get your desired result.