在angular-daterangepicker中选择startDate时更新日期

Question

我正在使用https://github.com/fragaria/angular-daterangepicker和http://www.daterangepicker.com/来显示内联日期范围选择器。 根据我在应用中选择的航班类型，我要么要求一个日期范围作为旅行日期，要么要求一个日期作为单程航班。 date对象似乎只是在endDate选择（第二个选择）上更新。 这是一个问题，因为我真的不知道如何在第一个选择上设置startDate。

我的控制器功能

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

这是我包含要转换为日期选择器的输入的地方。

<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>

如您所见，我正在监视模型以检测更改，然后将该值应用于我的工厂。 由于选择了第二个选项，因此可以对日期范围进行处理，但是它不能仅对一个选项有效。 简而言之，观看单向约会只会在第二个选择上触发。

有人在这种情况下有经验吗？

Answer 1

问题在于，单日期选择器在被强制内联时不会“关闭”。 这意味着该模型不会更新，或者在初始选择时不会更新一次。 第二个选择永远不会被选择，因此$ watch函数不会触发。

我对此的解决方案如下，现在可以工作

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

我猜这很hacky，但是从本质上讲，一旦分配了值，我就会重新触发日期选择器。 似乎该特定的Datepicker不是为我们要使用的功能而构建的。

我希望这可以帮助某人。

干杯，

Answer 2

我在某处也遇到过此类问题，但是如果您可以为此共享一个小提琴，那么调试起来就很容易。

我浏览了图书馆，发现有一些对您有帮助的东西：

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

155行：

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

您可以从此处发出事件，并获得所需的结果。