bootstrap-datepicker (range) - AngularJS Directive

Question

I'm trying to make use of the bootstrap-datepicker. I have an existing AngularJS directive, but when setting the initial value, it does not update when making use of a date range.

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>

Directive

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

Then, I tried the following directive (found here), but this doesn't work either for a date range - instead:

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

Any assistance would be appreciated! Thanks!

[Update]

CodePen to illustrate the issue:

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

@Pradeepb no errors, it basically sets the input value, but at the same time, breaks the datepicker. The picker popup no longer shows after the initial set. I'll work on a fiddle... Will update question when done. Thanks for the response! — Richard Bailey
– Richard Bailey, Commented Sep 27, 2016 at 16:41
Ok sure. how are you setting initial value? you can use this JSFIDDLE to modify. — Pradeepb
– Pradeepb, Commented Sep 27, 2016 at 16:47
I'm setting the value by making use of angularjs. Because ng-model binds to the variable in the controller — Richard Bailey
– Richard Bailey, Commented Sep 27, 2016 at 16:52

stafan · Accepted Answer · 2017-03-01 23:42:52Z

2

You could use the following library to solve the issue. datepicker

Edit: to resolve disappearance of date.

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

in controller

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

edited Mar 1, 2017 at 23:42

stafan

1651 silver badge10 bronze badges

answered Sep 28, 2016 at 14:23

Pradeepb

2,5723 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Richard Bailey Over a year ago

Hi Pradeepb, thanks for the effort, but I'm afraid that eliminates the date range functionality. And know we sit witg two independent calendars. It's essential that I have a calendar range. Thanks again!

Pradeepb Over a year ago

Ok. May i know How you planning to handle date range and why can't you do it with above code?

Richard Bailey Over a year ago

The above code doesn't perform any check if the from date is after the to date or visa versa. So now I have to perform this myself, which feels like reinventing the wheel. How I plan on handling it... Not a clue, that's why I asked the question

Pradeepb Over a year ago

I am not sure. When I used datepicker, I had to set min and max date manually.

Richard Bailey Over a year ago

So how do you show the UI that illustrates that a range is in use. In other words, on a UX level, how would you make is friendly for the user?

|

Collectives™ on Stack Overflow

bootstrap-datepicker (range) - AngularJS Directive

HTML

Directive

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Directive

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related