如何從日期范圍選擇器獲取值

Question

我正在使用Bootstrap的Date Range Picker選擇日期范圍 ，並且一切看起來都很好，我唯一的問題是，在選擇日期並提交表單后，我不知道如何獲取值（日期）我選擇了。

您可以在下面看到我的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 ，但仍然沒有運氣。

Answer 1

您有2個選擇：

在apply事件上設置它：（不要忘記$ scope。$ apply部分）

 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");
                    });
                });