Angular bootstrap datepicker date format does not format ng-model value

Question

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every times makes date like this

"2009-02-03T18:30:00.000Z"

instead of

02/04/2009

I have created a plunkr for the same plunkr link

My Html and controller code is like below

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control"
              datepicker-popup="{{format}}" 
              ng-model="dt"
              is-open="opened" min-date="minDate"
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" close-text="Close" />
              <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>
    <!--<div class="row">
        <div class="col-md-6">
            <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
        </div>
    </div>-->

    <hr />
    {{dt}}
</div>
  </body>
</html>

Angular controller

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {


  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

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


  $scope.format = 'dd-MMMM-yyyy';
};

Thanks in advance for review my question.

UPDATE

I am calling below method for posting my data and VAR is array of size 900 which contains date-picker variables.

public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {

        var query = this.EntityQuery.from('SaveFormData').withParameters({
            $method: 'POST',
            $encoding: 'JSON',
            $data: {
                VAR: formToSave.VAR,
                X: formToSave.X,
                CurrentForm: formToSave.currentForm,
            }
        });

        var deferred = this.q.defer();

        this.manager.executeQuery(query).then((response) => {
            deferred.resolve(response);
        }, (error) => {
                deferred.reject(error);
            });

        return deferred.promise;
    }

User · Accepted Answer

Although similar answers have been posted I'd like to contribute what seemed to be the easiest and cleanest fix to me. Assuming you are using the AngularUI datepicker and your initial value for the ng-Model does not get formatted simply adding the following directive to your project will fix the issue:

angular.module('yourAppName')
.directive('datepickerPopup', function (){
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
  }
}
});

I found this solution in the Github AngularUI issues and therefore all credit goes to the people over there.

User · Answer

Finally I got work around to the above problem. angular-strap has exactly the same feature that I am expecting. Just by applying date-format="MM/dd/yyyy" date-type="string" I got my expected behavior of updating ng-model in given format.

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
        <input type="text"  autoclose="true"  class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker>
      </div>
      <hr>
      {{selectedDate}}
     </form>
</div>

here is working plunk link

User · Answer

I can fix this by adding below code in my JSP file  Now both model and UI values are same    lt div ng-show  false  gt        dt    dt   date  dd-MMMM-yyyy       lt  div gt

User · Answer

I ran into the same problem and after a couple of hours of logging and investigating, I fixed it.

It turned out that for the first time the value is set in a date picker, $viewValue is a string so the dateFilter displays it as is. All I did is parse it into a Date object.

Search for that block in ui-bootstrap-tpls file

  ngModel.$render = function() {
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

and replace it by:

  ngModel.$render = function() {
    ngModel.$viewValue = new Date(ngModel.$viewValue);
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

Hopefully this will help :)

User · Answer

The format specified through datepicker-popup is just the format for the displayed date  The underlying ngModel is a Date object  Trying to display it will show it as it s default  standard-compliant rapresentation   You can show it as you want by using the date filter in the view  or  if you need it to be parsed in the controller  you can inject  filter in your controller and call it as  filter  date   date  format   See also the date filter docs

User · Answer

You can make use of  parsers as shown below this solved it for me   window module directive  myDate   function dateFilter      return       restrict   EAC       require    ngModel       link  function scope  element  attrs  ngModel          ngModel  parsers push function viewValue            return dateFilter viewValue  yyyy-MM-dd                               HTML    lt p class  input-group datepicker   gt     lt input      type  text       class  form-control       name  name       datepicker-popup  yyyy-MM-dd       date-type  string       show-weeks  false       ng-model  data  parent editable name         is-open   parent opened       min-date  minDate       close-text  Close       ng-required    editable mandatory         show-button-bar  false       close-on-date-selection  false       my-date   gt     lt span class  input-group-btn  gt       lt button type  button  class  btn btn-default  ng-click  openDatePicker  event   gt         lt i class  glyphicon glyphicon-calendar  gt  lt  i gt       lt  button gt     lt  span gt   lt  p gt

User · Answer

The datepicker  and datepicker-popup  directive requires that the ng-model be a Date object  This is documented here   If you want ng-model to be a string in specific format  you should create a wrapper directive  Here is an example  Plunker     x000D   x000D   function      x000D       use strict   x000D   x000D      angular x000D           module  myExample     ngAnimate    ngSanitize    ui bootstrap    x000D           controller  MyController   MyController  x000D           directive  myDatepicker   myDatepickerDirective   x000D   x000D      MyController  inject      scope    x000D   x000D      function MyController   scope    x000D         scope dateFormat    dd MMMM yyyy   x000D         scope myDate    30 Jun 2017   x000D        x000D   x000D      myDatepickerDirective  inject     uibDateParser     filter    x000D   x000D      function myDatepickerDirective  uibDateParser   filter    x000D          return   x000D              restrict   E   x000D              scope    x000D                  name       x000D                  dateFormat       x000D                  ngModel      x000D                 x000D              required   ngModel   x000D              link  function  scope    x000D   x000D                  var isString   angular isString scope ngModel   amp  amp  scope dateFormat  x000D   x000D                  if  isString    x000D                      scope internalModel   uibDateParser parse scope ngModel  scope dateFormat   x000D                    else   x000D                      scope internalModel   scope ngModel  x000D                    x000D   x000D                  scope open   function  event    x000D                      event preventDefault    x000D                      event stopPropagation    x000D                      scope isOpen   true  x000D                     x000D   x000D                  scope change   function      x000D                      if  isString    x000D                          scope ngModel    filter  date   scope internalModel  scope dateFormat   x000D                        else   x000D                          scope ngModel   scope internalModel  x000D                        x000D                     x000D   x000D                 x000D              template    x000D                    lt div class  input-group  gt    x000D                        lt input type  text  readonly  true  style  background  fff  name    name    class  form-control  uib-datepicker-popup    dateFormat    ng-model  internalModel  is-open  isOpen  ng-click  open  event   ng-change  change    gt    x000D                        lt span class  input-group-btn  gt    x000D                            lt button class  btn btn-default  ng-click  open  event   gt  amp nbsp  lt i class  glyphicon glyphicon-calendar  gt  lt  i gt  amp nbsp  lt  button gt    x000D                        lt  span gt    x000D                    lt  div gt   x000D                join     x000D            x000D        x000D   x000D        x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D     lt head gt  x000D       lt script src    ajax googleapis com ajax libs angularjs 1 6 1 angular js  gt  lt  script gt  x000D       lt script src    ajax googleapis com ajax libs angularjs 1 6 1 angular-animate js  gt  lt  script gt  x000D       lt script src    ajax googleapis com ajax libs angularjs 1 6 1 angular-sanitize js  gt  lt  script gt  x000D       lt script src    angular-ui github io bootstrap ui-bootstrap-tpls-2 5 0 js  gt  lt  script gt  x000D       lt script src  example js  gt  lt  script gt  x000D       lt link href    netdna bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  gt  x000D     lt  head gt  x000D   x000D     lt body ng-app  myExample  gt  x000D       lt div ng-controller  MyController  gt  x000D         lt p gt  x000D          Date format    dateFormat   x000D         lt  p gt  x000D         lt p gt  x000D          Value    myDate   x000D         lt  p gt  x000D         lt p gt  x000D           lt my-datepicker ng-model  myDate  date-format    dateFormat    gt  lt  my-datepicker gt  x000D         lt  p gt  x000D       lt  div gt  x000D     lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

With so many answers already written  Here s my take    With Angular 1 5 6  amp  ui-bootstrap 1 3 3   just add this on the model  amp  you are done   ng-model-options   timezone   UTC       Note  Use this only if you are concerned about the date being 1 day behind  amp  not bothered with extra time of T00 00 00 000Z   Updated Plunkr Here     http   plnkr co edit nncmB5EHEUkZJXRwz5QI p preview

User · Answer

All proposed solutions didn t work for me but the closest one was from  Rishii   I m using AngularJS 1 4 4 and UI Bootstrap 0 13 3    directive  jsr310Compatible     dateFilter    dateParser   function dateFilter  dateParser      return       restrict   EAC       require   ngModel       priority  1      link  function scope  element  attrs  ngModel          var dateFormat    yyyy-MM-dd          ngModel  parsers push function viewValue            return dateFilter viewValue  dateFormat                    ngModel  validators date   function  modelValue  viewValue            var value   modelValue    viewValue           if   attrs ngRequired  amp  amp   value              return true                     if  angular isNumber value               value   new Date value                      if   value              return true                    else if  angular isDate value   amp  amp   isNaN value               return true                    else if  angular isString value               var date   dateParser parse value  dateFormat             return  isNaN date                     else             return false

User · Answer

Defining a new directive to work around a bug is not really ideal.

Because the datepicker displays later dates correctly, one simple workaround could be just setting the model variable to null first, and then to the current date after a while:

$scope.dt = null;
$timeout( function(){
    $scope.dt = new Date();
},100);

User · Answer

Steps to change the default date format of ng-model

For different date formats check the jqueryui datepicker date format values here for example I have used dd/mm/yy

Create angularjs directive

angular.module('app', ['ui.bootstrap']).directive('dt', function () {
return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        ngModel.$parsers.push(function (viewValue) {
           return dateFilter(viewValue, 'dd/mm/yy');
        });
    }
 }
});

Write dateFilter function

function dateFilter(val,format) {
    return $.datepicker.formatDate(format,val);
}

In html page write the ng-modal attribute

<input type="text" class="form-control" date-type="string"  uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt />

User · Answer

After checking the above answers  I came up with this and it worked perfectly without having to add an extra attribute to your markup  angular module  app   directive  datepickerPopup   function dateFilter        return           restrict   EAC           require   ngModel           link  function scope  element  attr  ngModel                ngModel  parsers push function viewValue                    return dateFilter viewValue   yyyy-MM-dd

User · Answer

You may use formatters after picking value inside your datepicker directive. For example

angular.module('foo').directive('bar', function() {
    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.push(function(value) {
                if (value) {
                    // format and return date here
                }

                return undefined;
            });
        }
    };
});

LINK.

[angularjs] Angular bootstrap datepicker date format does not format ng-model value

The answer is

Examples related to angularjs

Examples related to datepicker

Examples related to angular-ui

Examples related to angular-ui-bootstrap

Examples related to angular-ngmodel

Tags