title: bootstrap-datepicker (range) - AngularJS Directive
body: <p>I'm trying to make use of the <a href="https://eternicode.github.io/bootstrap-datepicker/?markup=input&amp;format=&amp;weekStart=&amp;startDate=&amp;endDate=&amp;startView=0&amp;minViewMode=0&amp;maxViewMode=4&amp;todayBtn=false&amp;clearBtn=false&amp;language=en&amp;orientation=auto&amp;multidate=&amp;multidateSeparator=&amp;keyboardNavigation=on&amp;forceParse=on#sandbox" rel="nofollow noreferrer">bootstrap-datepicker</a>.
  I have an existing AngularJS directive, but when setting the initial value, it does not update when making use of a date range.</p>
  
  <h2>HTML</h2>
  
  <pre><code>        &lt;div class="input-group input-daterange" id="fromToDate" calendar ng-model="vm.fromToDate"&gt;
              &lt;input type="text" class="form-control input-sm" required ng-model="vm.bookingFromDate"&gt;
              &lt;span class="input-group-addon"&gt;to&lt;/span&gt;
              &lt;input type="text" class="form-control input-sm" required ng-model="vm.bookingToDate"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <h2>Directive</h2>
  
  <pre><code>// 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);
                          });
                      }
                  });
          }
      };
  };
  </code></pre>
  
  <p>Then, I tried the following directive (found <a href="https://gist.github.com/danbarua/5356062" rel="nofollow noreferrer">here</a>), but this doesn't work either for a date range - instead:</p>
  
  <pre><code>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);
              });
          }
      };
  };
  </code></pre>
  
  <p>Any assistance would be appreciated!
  Thanks!</p>
  
  <p>[Update]</p>
  
  <p><a href="http://codepen.io/Programm3r/pen/BLkagb" rel="nofollow noreferrer">CodePen</a> to illustrate the issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;See the Pen &lt;a href="http://codepen.io/Programm3r/pen/BLkagb"&gt;Bootstrap-Datepicker (Range) AngularJS&lt;/a&gt; by Richard  (&lt;a href="http://codepen.io/Programm3r"&gt;@Programm3r&lt;/a&gt;) on &lt;a href="http://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
  &lt;script async src="//assets.codepen.io/assets/embed/ei.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>