How to format a date using ng-model

Question

I have an input defined as   lt input class  datepicker  type  text  ng-model  clientForm birthDate    gt    Which is rigged up to be displayed elsewhere on the page    lt tr gt       lt th gt Birth Date lt  th gt       lt td gt   client birthDate date  mediumDate    lt  td gt   lt  tr gt    When the page loads the birth date is nicely formatted as something like Dec 22  2009  However  when I look inside my  lt input gt  it s shown as Tue Dec 22 2009 00 00 00 GMT-0800  Pacific Standard Time  which I guess is how JS renders Date objects as strings   Firstly  how do I tell Angular to show the date in the  lt input gt  as something like 12 22 2009  I can t seem to apply  filters inside the ng-model attribute   Secondly  as soon as I edit the date  even keeping it in it s original format  my other text  inside the  lt td gt   doesn t seem to apply the  date filter anymore  it suddenly changes formats to match that of the input textbox  How do I get it to apply the  date filter every time the model changes     Related questions    How do I get my directive to only fire on onchange  How to access arguments in a directive

User · Answer

I m using jquery datepicker to select date  My directive read date and convert it to json date format  in milliseconds  store in ng-model data while display formatted date and reverse if ng-model have json date  in millisecond  my formatter display in my format as jquery datepicker    Html Code     lt input type  text  jqdatepicker  ng-model  course launchDate  required readonly   gt    Angular Directive   myModule directive  jqdatepicker   function   filter        return           restrict   A           require   ngModel            link  function  scope  element  attrs  ngModelCtrl                element datepicker                   dateFormat   dd mm yy                   onSelect  function  date                           var ar date split                           date new Date ar 2   -  ar 1   -  ar 0                        ngModelCtrl  setViewValue date getTime                                     scope  apply                                                  ngModelCtrl  formatters unshift function v                return  filter  date   v  dd MM yyyy

User · Answer

Use custom validation of forms http   docs angularjs org guide forms Demo  http   plnkr co edit NzeauIDVHlgeb6qF75hX p preview  Directive using formaters and parsers and MomentJS    angModule directive  moDateInput   function   window        return           require   ngModel           restrict  A           link function  scope  elm  attrs  ctrl                var moment    window moment              var dateFormat   attrs moDateInput              attrs  observe  moDateInput   function  newValue                    if  dateFormat    newValue     ctrl  modelValue  return                  dateFormat   newValue                  ctrl  modelValue   new Date ctrl  setViewValue                                ctrl  formatters unshift function  modelValue                    if   dateFormat     modelValue  return                     var retVal   moment modelValue  format dateFormat                   return retVal                               ctrl  parsers unshift function  viewValue                    var date   moment viewValue  dateFormat                   return  date  amp  amp  date isValid    amp  amp  date year    gt  1950     date toDate

User · Answer

Angularjs ui bootstrap you can use angularjs ui bootstrap  it provides date validation also    lt input type  text   class  form-control   datepicker-popup    format    ng-model  dt  is-open  opened   min-date  minDate  max-date   2015-06-22    datepickeroptions  dateOptions  date-disabled  disabled date  mode   ng-required  true  gt      in controller can specify whatever format you want to display the date as datefilter      scope formats     dd-MMMM-yyyy    yyyy MM dd    dd MM yyyy    shortDate

User · Answer

I ve created a simple directive to enable standard input type  date   form elements to work correctly with AngularJS  1 2 16   Look here  https   github com betsol angular-input-date  And here s the demo  http   jsfiddle net F2LcY 1

User · Answer

I prefer to have the server return the date without modification  and have javascript do the view massaging  My API returns  MM DD YYYY hh mm ss  from SQL Server   Resource  angular module  myApp   factory  myResource       function  resource            return  resource  api myRestEndpoint    null                         GET     method   GET                  QUERY     method   GET   isArray  true                 POST     method   POST                  PUT     method   PUT                  DELETE     method   DELETE                           Controller  var getHttpJson   function          return myResource GET    promise then          function  response                 if  response myDateExample                    response myDateExample    filter  date   new Date response myDateExample    M d yyyy                                 scope myModel  response                     function  response                console log response data                         myDate Validation Directive  angular module  myApp   directive  myDate       function  window            return               require   ngModel               link  function scope  element  attrs  ngModel                     var moment    window moment                   var acceptableFormats     M D YYYY    M-D-YYYY                     function isDate value                         var m   moment value  acceptableFormats  true                        var isValid   m isValid                           console log value                         console log isValid                        return isValid                                       ngModel  parsers push function value                         if   value    value length     0                             return value                                              if  isDate value                             ngModel  setValidity  myDate   true                         else                           ngModel  setValidity  myDate   false                                              return value                                                           HTML   lt div class  form-group  gt       lt label for  myDateExample  gt My Date Example lt  label gt       lt input id  myDateExample             name  myDateExample             class  form-control             required               my-date            maxlength  50             ng-model  myModel myDateExample             type  text    gt       lt div ng-messages  myForm myDateExample  error  ng-if  myForm  submitted    myForm myDateExample  touched  class  errors  gt           lt div ng-messages-include  template validation messages html  gt  lt  div gt       lt  div gt   lt  div gt    template validation messages html   lt div ng-message  required  gt Required Field lt  div gt   lt div ng-message  number  gt Must be a number lt  div gt   lt div ng-message  email  gt Must be a valid email address lt  div gt   lt div ng-message  minlength  gt The data entered is too short lt  div gt   lt div ng-message  maxlength  gt The data entered is too long lt  div gt   lt div ng-message  myDate  gt Must be a valid date lt  div gt

User · Answer

I use the following directive that makes me and most users very happy  It uses moment for parsing and formatting  It looks a little bit like the one by SunnyShah  mentioned earlier   angular module  app directives     directive  appDatetime   function   window        return           restrict   A           require   ngModel           link  function  scope  element  attrs  ngModel                var moment    window moment               ngModel  formatters push formatter               ngModel  parsers push parser                element on  change   function  e                    var element   e target                  element value   formatter ngModel  modelValue                                function parser value                    var m   moment value                   var valid   m isValid                    ngModel  setValidity  datetime   valid                   if  valid  return m valueOf                    else return value                             function formatter value                    var m   moment value                   var valid   m isValid                    if  valid  return m format  LLLL                    else return value                              link               appDatetime   In my form i use it like this    lt label gt begin   lt input type  text  ng-model  doc begin  app-datetime required   gt  lt  label gt   lt label gt end   lt input type  text  ng-model  doc end  app-datetime required   gt  lt  label gt    This will bind a timestamp  milliseconds since 1970  to doc begin and doc end

User · Answer

Since you have used datepicker as a class I m assuming you are using a Jquery datepicker or something similar   There is a way to do what you are intending without using moment js at all  purely using just datepicker and angularjs directives   I ve given a example here in this Fiddle  Excerpts from the fiddle here    Datepicker has a different format and angularjs format is different  need to find the appropriate match so that date is preselected in the control and is also populated in the input field while the ng-model is bound  The below format is equivalent to  mediumDate  format of AngularJS     element  find   datepicker              datepicker                dateFormat   M d  yy                  The date input directive needs to have an interim string variable to represent the human readable form of date  Refreshing across different sections of page should happen via events  like  broadcast and  on  Using filter to represent date in human readable form is possible in ng-model as well but with a temporary model variable    scope dateValString    filter  date    scope dateVal   mediumDate

User · Answer

In Angular2  for anyone interested    lt input type  text  placeholder  My Date   ngModel   myDate   date   longDate   gt    with type of filters in DatePipe Angular

User · Answer

Here is very handy directive angular-datetime  You can use it like this    lt input type  text  datetime  yyyy-MM-dd HH mm ss  ng-model  myDate  gt    It also add mask to your input and perform validation

[angularjs] How to format a date using ng-model?

Examples related to angularjs