Javascript 引导数据选择器（范围）-AngularJS指令

我正试图利用这个机会。 我有一个现有的AngularJS指令，但在设置初始值时，它在使用日期范围时不会更新

HTML 然后，我尝试了以下指令（find），但这对日期范围也不起作用，而是：

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

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

[更新]

为了说明这一问题：

请参阅上的Richard的笔

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

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

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

---

有错误吗？您能提供任何工作的JSFIDLE吗？@Pradeepb没有错误，它基本上设置了输入值，但同时破坏了日期选择器。初始设置后，选择器弹出窗口不再显示。我会做小提琴。。。完成后将更新问题。谢谢你的回复！好的，当然可以。如何设置初始值？你可以用它来修改。我正在使用angularjs设置值。因为ng模型绑定到controller@Pradeepb添加了codepen和linkHi Pradeepb，感谢您的努力，但恐怕这会消除日期范围功能。我们坐在两个独立的日历旁。我必须有一个日历范围。再次感谢！好啊请问您打算如何处理日期范围？为什么不能使用上述代码？上述代码不会检查起始日期是否在截止日期之后，或者visa卡是否在截止日期之后。所以现在我必须自己做这件事，感觉就像是重新发明轮子。我打算如何处理它。。。一点线索也没有，这就是为什么我问这个问题我不确定。当我使用datepicker时，我必须手动设置最小和最大日期。那么如何显示说明某个范围正在使用的UI呢。换句话说，在用户体验层面上，您将如何使用户友好？

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

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