title: Angular UI bootstrap date mismatch between model & datepicker
body: <p>See this Plunkr  :</p>
  
  <p><a href="http://plnkr.co/edit/gSTqtxfcEjrYLt1mIzVD?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/gSTqtxfcEjrYLt1mIzVD?p=preview</a></p>
  
  <p>I have taken this from an eg.  given at <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">https://angular-ui.github.io/bootstrap/</a> for a demo of date picker.</p>
  
  <p>In the heading, <strong>My Date</strong> when I am selecting a date 2016-06-15 from the date picker, the model which is bound shows date as 2016-06-14.
  so always there is a mismatch of 1 day. </p>
  
  <p>This post <a href="https://stackoverflow.com/questions/30070556/angular-bootstrap-datepicker-mismatch-between-view-and-model/30070762#comment63117015_30070762">angular bootstrap datepicker mismatch between view and model</a>
  suggested to apply date filter to the view. </p>
  
  <p>However, it is only a patch up as when I am posting to an api, I still get 2016-06-14 on the server.</p>
  
  <p>Is this a bug or is there some work around for it ?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;style&gt;
    .full button span {
      background-color: limegreen;
      border-radius: 32px;
      color: black;
    }
    .partially button span {
      background-color: orange;
      border-radius: 32px;
      color: black;
    }
  &lt;/style&gt;
  &lt;div ng-controller="DatepickerPopupDemoCtrl"&gt;
      &lt;pre&gt;Selected date is: &lt;em&gt;{{dt | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;
  
      &lt;h4&gt;Popup&lt;/h4&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;p class="input-group"&gt;
            &lt;input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" ng-click="open1()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-6"&gt;
          &lt;p class="input-group"&gt;
            &lt;input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" ng-click="open2()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;br/&gt;
        &lt;h2&gt; My Date&lt;/h2&gt;
        Date is : {{dt1 | date : 'dd/MM/yyyy'}}
  Real Date is : {{dt1}}
        &lt;div class="col-md-6"&gt;
          &lt;p class="input-group"&gt;
  
            &lt;input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="popup3.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" ng-click="open3()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;input type="text" class="form-control" ng-model="dt1 | date"  /&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;label&gt;Format: &lt;span class="muted-text"&gt;(manual alternate &lt;em&gt;{{altInputFormats[0]}}&lt;/em&gt;)&lt;/span&gt;&lt;/label&gt; &lt;select class="form-control" ng-model="format" ng-options="f for f in formats"&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;hr /&gt;
      &lt;button type="button" class="btn btn-sm btn-info" ng-click="today()"&gt;Today&lt;/button&gt;
      &lt;button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)"&gt;2009-08-24&lt;/button&gt;
      &lt;button type="button" class="btn btn-sm btn-danger" ng-click="clear()"&gt;Clear&lt;/button&gt;
      &lt;button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction"&gt;Min date&lt;/button&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Script :</strong> </p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
    $scope.today = function() {
      $scope.dt = new Date();
    };
    $scope.today();
  
  
  
    $scope.clear = function() {
      $scope.dt = null;
    };
  
    $scope.inlineOptions = {
      customClass: getDayClass,
      minDate: new Date(),
      showWeeks: true
    };
  
    $scope.dateOptions = {
      dateDisabled: disabled,
      formatYear: 'yy',
      maxDate: new Date(2020, 5, 22),
      minDate: new Date(),
      startingDay: 1
    };
  
    // Disable weekend selection
    function disabled(data) {
      var date = data.date,
        mode = data.mode;
      return mode === 'day' &amp;&amp; (date.getDay() === 0 || date.getDay() === 6);
    }
  
    $scope.toggleMin = function() {
      $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
      $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
    };
  
    $scope.toggleMin();
  
    $scope.open1 = function() {
      $scope.popup1.opened = true;
    };
  
    $scope.open2 = function() {
      $scope.popup2.opened = true;
    };
  
      $scope.open3 = function() {
      $scope.popup3.opened = true;
    };
  
    $scope.setDate = function(year, month, day) {
      $scope.dt = new Date(year, month, day);
    };
  
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];
    $scope.altInputFormats = ['M!/d!/yyyy'];
  
    $scope.popup1 = {
      opened: false
    };
  
    $scope.popup2 = {
      opened: false
    };
  
  
  
    $scope.popup3 = {
      opened: false
    };
  
  
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 1);
    $scope.events = [
      {
        date: tomorrow,
        status: 'full'
      },
      {
        date: afterTomorrow,
        status: 'partially'
      }
    ];
  
    function getDayClass(data) {
      var date = data.date,
        mode = data.mode;
      if (mode === 'day') {
        var dayToCheck = new Date(date).setHours(0,0,0,0);
  
        for (var i = 0; i &lt; $scope.events.length; i++) {
          var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
  
          if (dayToCheck === currentDay) {
            return $scope.events[i].status;
          }
        }
      }
  
      return '';
    }
  });
  </code></pre>