bootstrap-datepicker (范围) - AngularJS 指令

Question

我正在尝试使用bootstrap-datepicker。 我有一个现有的 AngularJS 指令，但是在设置初始值时，在使用日期范围时它不会更新。

HTML

        <div class="input-group input-daterange" id="fromToDate" calendar ng-model="vm.fromToDate">
            <input type="text" class="form-control input-sm" required ng-model="vm.bookingFromDate">
            <span class="input-group-addon">to</span>
            <input type="text" class="form-control input-sm" required ng-model="vm.bookingToDate">
        </div>

指令

// this directive updates the value, once it has been selected, but not when the initial value has been set**
function calendar() {
    return {
        require: 'ngModel',
        link: function($scope, el, attr, ngModel) {
            $(el)
                .datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    todayBtn: 'linked',
                    onSelect: function(dateText) {
                        $scope.$apply(function() {
                            ngModel.$setViewValue(dateText);
                        });
                    }
                });
        }
    };
};

然后，我尝试了以下指令（找到 here），但这也不适用于日期范围 - 相反：

function calendar() {
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function ($scope, element, attrs, controller) {
            var updateModel, onblur;

            if (controller != null) {

                updateModel = function (event) {
                    element.datepicker('hide');
                    element.blur();
                };

                onblur = function () {
                    var date = element.val();
                    return $scope.$apply(function () {
                        return controller.$setViewValue(date);
                    });
                };

                controller.$render = function() {
                    var date = controller.$viewValue;
                    element.datepicker().data().datepicker.date = date.from.toDate();
                    element.datepicker('setValue');
                    element.datepicker('update');
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('bdatepicker', function (value) {
                var options = {
                    format: "yyyy/mm/dd",
                    todayBtn: "linked",
                    autoclose: true,
                    todayHighlight: true
                };
                return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
            });
        }
    };
};

任何帮助将不胜感激！ 谢谢！

[更新]

CodePen 说明问题：

<p data-height="322" data-theme-id="dark" data-slug-hash="BLkagb" data-default-tab="js,result" data-user="Programm3r" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/Programm3r/pen/BLkagb">Bootstrap-Datepicker (Range) AngularJS</a> by Richard  (<a href="http://codepen.io/Programm3r">@Programm3r</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Answer 1

您可以使用以下库来解决此问题。 datepicker

编辑：解决日期消失的问题。

<input type="text" class="form-control input-sm" ng-model="vm.bookingFromDate" id="fromDate">
<span class="input-group-addon">to  </span>
<input type="text" class="form-control input-sm" ng-model="vm.bookingToDate" id="toDate">

在控制器中

$('#fromDate').val(vm.bookingFromDate);
$('#toDate').val(vm.bookingToDate);