【问题标题】:How to get values from date range picker如何从日期范围选择器中获取值
【发布时间】:2016-01-19 20:58:46
【问题描述】:

我正在使用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,但仍然没有运气。

【问题讨论】:

    标签: javascript angularjs daterangepicker


    【解决方案1】:

    你有两个选择:

    在应用事件上设置它:(不要忘记 $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");
                        });
                    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-17
      • 2019-07-04
      • 2015-10-18
      • 1970-01-01
      • 2016-04-04
      • 2020-04-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多