在 angular-daterangepicker 中更新开始日期选择的日期

Question

我正在使用 https://github.com/fragaria/angular-daterangepicker and http://www.daterangepicker.com/ 显示内联日期范围选择器。根据在我的应用程序中选择的航班类型，我需要旅行日期的日期范围，或者单程航班的单一日期。日期对象似乎只更新了 endDate 选择 - 第二个选择。这是一个问题，因为我真的不知道如何在第一次选择时设置开始日期。

我的控制器功能

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

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

有人遇到过这种情况吗？

Answer 1

我也曾在某处遇到过这种问题，但是你的情况如果你能分享一个fiddle那么它就很容易调试了。

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

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

第 155 行：

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

您可以从这里发出一个事件，并获得您想要的结果。

Answer 2

问题是单一日期选择器在强制内联时不会 "close"。这意味着模型不会更新，或者只在初始选择时更新一次。第二个选择永远不会被拾取，因此 $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);

我想这很老套，但基本上我会在每次分配值时重新触发日期选择器。看起来这个特定的 Datepicker 并不是为我们使用它而构建的。

我希望这可能对某人有所帮助。

干杯，

在 angular-daterangepicker 中更新开始日期选择的日期

Updating Date on startDate selection in angular-daterangepicker

javascript

angularjs

datepicker

date-range