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   lt  doctype html gt   lt html ng-app  plunker  gt     lt head gt       lt script src    ajax googleapis com ajax libs angularjs 1 2 10 angular js  gt  lt  script gt       lt script src    angular-ui github io bootstrap ui-bootstrap-tpls-0 11 0 js  gt  lt  script gt       lt script src  example js  gt  lt  script gt       lt link href    netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  rel  stylesheet  gt     lt  head gt     lt body gt    lt div ng-controller  DatepickerDemoCtrl  gt       lt pre gt Selected date is   lt em gt   dt   date  MM dd yyyy     lt  em gt  lt  pre gt       lt p gt above filter will just update above UI but I want to update actual ng-modle lt  p 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                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    gt                 lt span class  input-group-btn  gt                    lt button type  button  class  btn btn-default  ng-click  open  event   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 gt       lt  -- lt div class  row  gt           lt div class  col-md-6  gt               lt label gt Format  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 -- gt        lt hr   gt        dt    lt  div gt     lt  body gt   lt  html gt    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    gt                deferred resolve response               error    gt                    deferred reject error                            return deferred promise

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

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   lt 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   gt

User · 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

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

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

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

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

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    lt div class  bs-example  style  padding-bottom  24px   append-source gt       lt form name  datepickerForm  class  form-inline  role  form  gt         lt  -- Basic example -- gt         lt div class  form-group  ng-class    has-error   datepickerForm date  invalid   gt           lt label class  control-label  gt  lt i class  fa fa-calendar  gt  lt  i gt  Date  lt small gt  as date  lt  small gt  lt  label gt           lt input type  text   autoclose  true   class  form-control  ng-model  selectedDate  name  date  date-format  MM dd yyyy  date-type  string  bs-datepicker gt         lt  div gt         lt hr gt          selectedDate         lt  form gt   lt  div gt    here is working plunk link

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

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

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

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

Examples related to angularjs

Examples related to datepicker

Examples related to angular-ui

Examples related to angular-ui-bootstrap

Examples related to angular-ngmodel