Aktualisierungsdatum bei Auswahl von startDate in angular-daterangepicker

Question

Ich verwende https://github.com/fragaria/angular-daterangepicker und http://www.daterangepicker.com/, um eine Datumsauswahl inline anzuzeigen. Basierend auf dem Flugtyp, der in meiner App ausgewählt wurde, benötige ich entweder einen Datumsbereich für Reisedaten oder ein einzelnes Datum für einen Oneway-Flug. Das date-Objekt scheint jedoch nur auf die endDate-Auswahl zu aktualisieren - die zweite Auswahl. Dies ist ein Problem, da ich wirklich nicht weiß, wie das startDate bei der ersten Auswahl gesetzt wird.

meine Controller-Funktion

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

Und das ist, wo ich schließen die Eingabe in den Datepicker umgewandelt werden.

Wie Sie sehen können, beobachte ich das Modell, um Änderungen zu erkennen und dann den Wert auf meine Fabrik anzuwenden. Dies wirkt sich aufgrund der zweiten Auswahl auf Datumsbereiche aus, funktioniert jedoch nicht nur für eine Auswahl. Kurz gesagt, ein OnewayDate wird nur bei der zweiten Auswahl angezeigt.

Hat jemand Erfahrung mit diesem Szenario?

Answer 1

Das Problem ist, dass er Single Date Picker nicht "schließt", wenn es gezwungen wird, inline zu sein. Dies bedeutet, dass das Modell nicht oder nur einmal bei der ersten Auswahl aktualisiert wird. Die zweite Auswahl wird nie aufgenommen, daher wird die $ watch-Funktion nicht ausgelöst.

meine Lösung ist wie folgt und arbeitet jetzt

$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); 

Ich denke, das sehr hacky ist, aber im Wesentlichen ich wieder Auslöser der Datepicker, wann immer ein Wert zugewiesen wird. Es scheint, dass dieser spezielle Datepicker nicht für den Gebrauch gebaut wurde, den wir darauf werfen.

Ich hoffe, das könnte jemandem helfen.

Prost,

Answer 2

Ich hatte auch irgendwo diese Art von Problem, aber in Ihrem Fall, wenn Sie eine Geige dafür teilen können, dann wird es einfach zu debuggen sein.

Ich ging die Bibliothek durch und fand ich etwas sehr nützlich für Sie:

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

Linie 155:

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

Sie ein Ereignis von hier emittieren kann, und das gewünschte Ergebnis erhalten .