Angular 指令打开日期选择器答案

【问题标题】：Angular directive open date pickerAngular 指令打开日期选择器
【发布时间】：2017-04-21 01:44:57
【问题描述】：

我有一个 Angular 指令，其中包含一个带有日期选择器的表单。我正在尝试创建一个函数来防止按钮单击在表单上调用提交。我无法确定在哪里可以找到 .opened 属性。当我使用 ng-click 执行打开时，一切正常。下面是示例代码。

HTML：

<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
    <div class="form-group">
    <label class="control-label" for="effectiveDate">Effective Date</label>
    <div class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
      </span>
    </div>
    <p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
  </div>
</form>

我还尝试将 dpEffectiveDate 传递给 openDateHandler 函数。

下面是我的 Typescript 函数

openDateHandler = ($event) => {
  $event.preventDefault();
  //dpDate.opened = !dpDate.opened;
}

如何访问 .opened 属性？

【问题讨论】：

标签： angularjs datepicker

【解决方案1】：

如果您只想阻止提交行为，只需将 'type="button"' 添加到您的按钮元素。

 <button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">

默认情况下，表单内的按钮将充当提交按钮，除非它被赋予不同的类型。

您不应该为了防止表单提交而弄乱日期选择器的打开状态。

【讨论】：