Question

我正在使用https://github.com/fragaria/angular-daterangepicker和http://www.daterangepicker.com/来显示内联日期范围选择器。根据我的应用程序中选择的航班类型，我要么需要旅行日期的日期范围，要么单程航班的单个日期。但是日期对象似乎只更新了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);
}
]);

这就是我要包含要转换为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>

正如您所看到的，我正在观察模型以检测更改，然后将该值应用于我的工厂。由于第二次选择，这适用于日期范围，但它不仅适用于一个选择。简而言之，观看onewaydate只会触发第二个选择。

有没有人有这种情况的经验？

Answer 1

问题是他的单日期选择器没有＆＃34;关闭＆＃34;当它被迫内联时。这意味着模型不会更新，也不会在初始选择时更新一次。第二个选择永远不会被选中，因此$ 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。看起来这个特殊的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);
        });

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

在angular-daterangepicker中更新startDate选项上的日期

2 个答案: