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

仅使用管道，更改了日期时间格式，但是发生了新问题，角度“有错误”或“有成功” 不起作用。

现在，我想根据自己的习惯更改日期时间格式，方法是 有错误或成功 。我已经提出了一些建议，但是没有用，这里是链接：angularJs date formatting on input field change，Change the date time format in angularjs，Change Date input field format in angular等等，但问题仍然存在。预先感谢。

Answer 1

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

在您为angularjs-bootstrap-datetimepicker提供的链接中，它指定了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' }">

如果以上方法均无效，请查看demos provided，看看它们是否有帮助。有关该页面的实现，请参见demo folder。

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

1 个答案: