change date time format in input field using angularjs

Question

I'm a newbie in angular js, I'm using AngularJs - 1.6.9. I'm using angularjs-bootstrap-datetimepicker directive for date time. This is an easy code for implementation & works fine with default date time format. The issue has come up when I want to change the date time format in Input Field. Here is my working code.

<div class="form-group col-md-2" 
     ng-class="{'has-error': myForm.edtaDate.$error.required, 'has-success': myForm.edtaDate.$valid }
  <label>EDTA</label>
  <div class="dropdown date_dropdown"> 
    <a class="dropdown-toggle" id="dropdown1" role="button" 
       data-toggle="dropdown" data-target="dropdown1" href="#">
      <div class="input-group">
        <input type="text" required id="edtaDate" name="edtaDate" 
               class="form-control" data-ng-model="myModel.edtaDate">
        <span class="input-group-addon">
          <i class="glyphicon glyphicon-calendar"></i>
        </span>
      </div>
    </a>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
       <datetimepicker data-before-render="startDateBeforeRender($dates)"
                       data-ng-model="myModel.edtaDate"
              data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }">
       </datetimepicker>
    </ul> 
  </div>
</div>

In the above code everything working fine. Let's focus on the issue when I changed the format here is the code:

<input type="text" required id="edtaDate" name="edtaDate"
       class="form-control"
       data-ng-model="myModel.edtaDate | date:'yyyy-MM-dd HH:mm'">

just using the piping, date time format change but the new issue has occurred, angular "has-error" or "has-success" not work.

Now I want to change the date time format according to my ease with has-error or has-success. i've gone through few suggestions but not working, here is the link: angularJs date formatting on input field change, Change the date time format in angularjs, Change Date input field format in angular and many more but the problem still remains the same. Thanks in advance.

Answer 1

Ideally you shouldn't be binding two input fields to the same model as an update to one field could trigger update hooks on the other which can cause some pretty painful bugs. Additionally, dateTimePicker sets a JSDate object whereas your input field will be text so you may have to parse that input through new Date(myDateInput) depending on what is consuming it.

In the link you provided for angularjs-bootstrap-datetimepicker it specifies that for the config property 'modelType' you can specify a format string in lieu of the preset values

So from what you have provided, the following is what you are looking for:

<datetimepicker data-before-render="startDateBeforeRender($dates)"
                data-ng-model="myModel.edtaDate"
                data-datetimepicker-config="{ dropdownSelector: '#dropdown1',
                                              modelType: 'yyyy-MM-dd HH:mm' }">

If none of the above works, take a look at the demos provided and see if they help out. See the demo folder for the implementation of that page.