使用 angularjs 更改输入字段中的日期时间格式

Question

我是 angular js 的新手，我正在使用 AngularJs - 1.6.9.我对日期时间使用 angularjs-bootstrap-datetimepicker 指令。这是一个易于实现的代码，并且可以在默认日期时间格式下正常工作。当我想更改 Input 字段中的日期时间格式时，问题就出现了。这是我的工作代码。

<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>

在上面的代码中一切正常。让我们关注一下我更改格式时的问题，这里是代码：

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

只是使用管道，日期时间格式更改但出现了新问题，angular "has-error" 或 "has-success" 不起作用。

现在我想根据自己的轻松程度更改日期时间格式 has-error 或 has-success。我已经听取了一些建议但没有奏效，这里是 link: , , Change Date input field format in angular 等等，但问题仍然存在。提前致谢。

Answer 1

理想情况下，您不应将两个输入字段绑定到同一模型，因为对一个字段的更新可能会触发另一个字段的更新挂钩，从而导致一些非常痛苦的错误。此外，dateTimePicker 设置一个 JSDate 对象，而您的输入字段将是文本，因此您可能必须通过 new Date(myDateInput) 解析该输入，具体取决于使用它的内容。

在您为 angularjs-bootstrap-datetimepicker 提供的 link 中，它指定 for the config property 'modelType' you can specify a format string in lieu of the preset values

根据您提供的内容，以下是您要查找的内容：

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

如果上述 none 有效，请查看 demos provided and see if they help out. See the demo folder 以了解该页面的实施情况。

使用 angularjs 更改输入字段中的日期时间格式

change date time format in input field using angularjs

angularjs

datetime

datetimepicker

datetime-format

bootstrap-datetimepicker