title: change date time format in input field using angularjs
body: <p>I'm a newbie in angular js, I'm using <strong>AngularJs</strong> - <em>1.6.9</em>. I'm using <a href="https://github.com/dalelotts/angularjs-bootstrap-datetimepicker" rel="nofollow noreferrer">angularjs-bootstrap-datetimepicker</a> directive for date time. This is an easy code for implementation &amp; works fine with default date time format. The issue has come up when I want to change the date time format in <em>Input</em> Field. Here is my working code.</p>
  
  <pre><code>&lt;div class="form-group col-md-2" 
       ng-class="{'has-error': myForm.edtaDate.$error.required, 'has-success': myForm.edtaDate.$valid }
    &lt;label&gt;EDTA&lt;/label&gt;
    &lt;div class="dropdown date_dropdown"&gt; 
      &lt;a class="dropdown-toggle" id="dropdown1" role="button" 
         data-toggle="dropdown" data-target="dropdown1" href="#"&gt;
        &lt;div class="input-group"&gt;
          &lt;input type="text" required id="edtaDate" name="edtaDate" 
                 class="form-control" data-ng-model="myModel.edtaDate"&gt;
          &lt;span class="input-group-addon"&gt;
            &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/a&gt;
  
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; 
         &lt;datetimepicker data-before-render="startDateBeforeRender($dates)"
                         data-ng-model="myModel.edtaDate"
                data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }"&gt;
         &lt;/datetimepicker&gt;
      &lt;/ul&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above code everything working fine. Let's focus on the issue when I changed the format here is the code:</p>
  
  <pre><code>&lt;input type="text" required id="edtaDate" name="edtaDate"
         class="form-control"
         data-ng-model="myModel.edtaDate | date:'yyyy-MM-dd HH:mm'"&gt;
  </code></pre>
  
  <p>just using the piping, date time format change but the new issue has occurred, angular <em>"has-error" or "has-success"</em> not work.</p>
  
  <p>Now I want to change the date time format according to my ease with <strong><em>has-error or has-success</em></strong>. i've gone through few suggestions but not working, here is the link: <a href="https://stackoverflow.com/questions/37412016/angularjs-date-formatting-on-input-field-change">angularJs date formatting on input field change</a>, <a href="https://stackoverflow.com/questions/37315505/change-the-date-time-format-in-angularjs">Change the date time format in angularjs</a>, <a href="https://stackoverflow.com/questions/49910533/change-date-input-field-format-in-angular">Change Date input field format in angular</a> and many more but the problem still remains the same. Thanks in advance.</p>