Angular date formatting from model

Question

I have an input that gets a datetime object from an ng-model and displays it. For whatever reason, I simply cannot get the date formatted correctly. However, when I check the code, the date is formatted. Can someone please explain?

Look at the input value versus what is actually displayed

Code:

      <div class="input-field col l4">
        <input value="{{note.contactHistoryNoteDate | date:'MMMM dd, yyyy'}}" ng-model="note.contactHistoryNoteDate" id="contactHistoryNoteDate1{{$index}}" type="text" class="datepicker edit-date">
        <label class="active" for="contactHistoryNoteDate1{{$index}}">DATE</label>
      </div>

You cannot use filters on an input field. You could create a watcher that formats the value using the filter in your directive though. — sledsworth, Dec 28 '16 at 15:41

TheSharpieOne · Accepted Answer · 2016-12-28T15:50:29.433

The value attribute is the initial value, the ng-model attribute binds the value to a model. What you are seeing is the bound value from ng-model.

Bonus:
To get the date to display as you want, you will need to create (or find) a custom directive which will user angular's parsers and formatters pipelines. This pipelines are responsible for turning the user's input (what the user sees) into a value the code can use and vice-versa such as your case, turning a date into something the user can see/make more sense of.

Angular date formatting from model

1 Answers1