Get ui.bootstrap.datepicker value without time/timezone

Question

I need to be able to store the selected date value as date without time in my ng-model.

Here is my view:

<script type="text/ng-template" id="form_field_datetime">
  <h3 style="color:coral ;">{{field.displayName}}</h3>
  <br />
  <div>
    <div ng-controller="dateCtrl">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>

        </p>
    </div>  
  </div>
</script>

enter image description here

On selection of the date shown above the stored value in my ng-model is :

2012-03-12T22:00:00.000Z

I need:

2012-03-13

Here is the controller(pretty much as in example):

  app.controller('dateCtrl', ['$scope', 
      function ($scope) {
        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();

          $scope.opened = true;
        };

        $scope.dateOptions = {
          formatYear: 'yy',
          startingDay: 0
        };

        $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

      }
  ]);

How to go around this?

Wich version of ui.bootstrap are you using ? In wich case have you this bug ? When you select a date with the date picker, or when you pre-load a date with your ng-model ? — Pierre-Alexandre Moller, May 12 '15 at 09:16
Version: 0.12.1 - 2015-02-20...issue when selected from the popup calendar. The initial load works fine from the model. — Al Ex Tsm, May 12 '15 at 09:20
There is a bug on this one wich was fixed on the 0.13.0 version. If your format is fine when you picked up the date with the datepicker but it's `2012-03-12T22:00:00.000Z` when you already have a value in your ng-model. It's because of this bug. — Pierre-Alexandre Moller, May 12 '15 at 09:22
I read the following but didn't know how to work around it (link )(solution) — Al Ex Tsm, May 12 '15 at 09:23
Existing values remain correct, but on select of a new date it's stored with the ime/timezone added! — Al Ex Tsm, May 12 '15 at 09:25
@Apédémak I have updated to latest version of ui.bootstrap but behaves the same way. There is an initial value in the ng-model(2012-03-16) it stays in the right format both in the model and within the input field. On selection of a new date it remains correctly selected within the input field but is stored with the extra and un wanted "T00:00:00.000Z" behind the date. The date depending on which one is chosen sometimes is displayed with one day less(ex: 2012-03-19 becomes stored as 2012-03-19T00:00:00.000Z but 2015-05-27 will be stored as 2015-05-26T21:00:00.000Z ) — Al Ex Tsm, May 12 '15 at 09:45
This difference of a day depends on the GMT, `2012-03-19T00:00:00.000Z` is probably GMT+3, so when the format change, it's 21H the previous day. Else, if you put this `datepicker-popup="yyyy-MM-dd"` instead of `datepicker-popup="{{format}}"`, have you the same behaviour ? — Pierre-Alexandre Moller, May 12 '15 at 09:50
You are right about the GMT+3, that is the issue. I would like to not have time/timezone at all in my stored value — Al Ex Tsm, May 12 '15 at 09:58
What I would like to do is have control over the 'onSelect of a date' event and before its stored in the model run a substring(0,12) on the value or similar!? — Al Ex Tsm, May 12 '15 at 10:13

score 2 · Accepted Answer · answered May 12 '15 at 15:20

I have used the directive I mentioned earlier in the comments of my question to handle the selected date and remove the time info.

<script type="text/ng-template" id="form_field_date">
  <h3 style="color:coral ;">{{field.displayName}}</h3>
  <br />
  <div>
    <div ng-controller="dateCtrl">
        <p class="input-group">
          <input datepicker-localdate type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>

        </p>
    </div>  
  </div>
</script>

Controller(dateCtrl):

   app.controller('dateCtrl', ['$scope', 
      function ($scope) {
        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();

          $scope.opened = true;
        };

        $scope.dateOptions = {
          formatYear: 'yy',
          startingDay: 0
        };

        $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

      }
  ]);

The directive(datepicker-localdate):

app.directive('datepickerLocaldate', ['$parse', function ($parse) {
    var directive = {
        restrict: 'A',
        require: ['ngModel'],
        link: link
    };
    return directive;

    function link(scope, element, attr, ctrls) {
        var ngModelController = ctrls[0];

        // called with a JavaScript Date object when picked from the datepicker
        ngModelController.$parsers.push(function (viewValue) {
            console.log(viewValue);console.log(viewValue);console.log(viewValue);
            // undo the timezone adjustment we did during the formatting
            viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
            // we just want a local date in ISO format
            return viewValue.toISOString().substring(0, 10);
        });
    }
}]);

It all works now!

Get ui.bootstrap.datepicker value without time/timezone

1 Answers1