Search code examples
angularjsdatepickermaterialize

Materializecss datepicker Date display issue

I am using Materializecss' datepicker function as part of a form. When the user clicks the input and inputs a chosen date, the input is correctly formatted as shown:

enter image description here

I created this format with Angular by doing:

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

However, when I allow the user to edit the form, and I pull the date from the model, it looks like this (despite formatting): enter image description here

Anyone know how to fix the formatting?

Solution

  • You need to set setDefaultDate to true;

      $(".datepicker").datepicker({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 1, // Creates a dropdown of 15 years to control year
    format: "mm dd yyyy",
    setDefaultDate: true
  });