如何从日期范围选择器中获取值

时间:2015-05-18 16:48:01

标签: javascript angularjs daterangepicker

我正在使用Date Range Picker for Bootstrap选择一系列日期,一切看起来都不错,我唯一的问题是,在我选择日期并提交表单后,我不知道如何获得我选择的值(日期)。

您可以在下面看到我的daterangepicker设置:

<input ui-jq="daterangepicker" ui-options="{
      format: 'DD-MM-YYYY',
      startDate: '{{ first }}',
      endDate: '{{ second }}',
      separator: ' til ',
      showWeekNumbers: true,
      locale: {
           applyLabel: 'Vælg datoer',
           cancelLabel: 'Annuller',
           fromLabel: 'Fra',
           toLabel: 'Til',
           firstDay: 1
      }
}" ng-model="plane.date" class="form-control" placeholder="Dato" />

正如您所看到的,我尝试添加ng-model,但仍然没有运气。

1 个答案:

答案 0 :(得分:0)

您有两个选择:

将其设置为apply event:(不要忘记$ scope。$ apply part)

 angular.element('input#dataRange') = datePicker;
 datePicker.on('apply.daterangepicker', function (ev, picker) {
                $scope.$apply(function () {
                    $scope.fromDate = picker.startDate.format("YYYY-MM-DD");
                    $scope.toDate = picker.endDate.format("YYYY-MM-DD");
                });
            });

或随时获取值

angular.element('input#dataRange')= datePicker;
$scope.fromDate = datePicker.data('daterangepicker').startDate.format("YYYY-MM-DD");
$scope.toDate = datePicker.data('daterangepicker').endDate.format("YYYY-MM-DD");

如果您希望在用户手动编辑输入时获得失去焦点的日期(模糊),这也很有用:

datePicker.on('blur', function (ev) {
                    $scope.$apply(function () {
                        $scope.fromDate = datePicker.data('daterangepicker').startDate.format("YYYY-MM-DD");
                        $scope.toDate = datePicker.data('daterangepicker').endDate.format("YYYY-MM-DD");
                    });
                });