jsonangularjsdatepickertimezoneui.bootstrap

Get ui.bootstrap.datepicker value without time/timezone


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?


Solution

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