Angular2 中日期选择器的验证

Question

我正在为日期选择器使用自定义指令。这是模板：

    <div class="input-group">
      <input type="text" id="tbxDate"
         pattern="\d{1,2}/\d{1,2}/\d{4}"
         class="form-control" (change)="changeValue($event)"
         (blur)="onTouchedCallback()"/>
      <div class="input-group-btn">
        <button class="btn" (click)="show()">
            <i class="fa fa-calendar"></i></button>
     </div>
    </div>

    <div id="calendar-popup" class="calendar-popup"
          [style.display]="panelVisible ? 'block' : 'none'" 
          [style.width]="width">
          <bootflat-date-picker id="btf" [options]="myDatePickerOptions" 
            (dateChanged)="selectDate($event)" [(selDate)]="selectionDate">
            </bootflat-date-picker>
    </div>

但是模式验证不起作用。它也采用字母数字。我想限制只取 MM/DD/YY

Answer 1

请检查这个Plunker。

更新了正则表达式

<div class="input-group">
  <input type="text" id="tbxDate"
     pattern="/^(0?[1-9]|1[012])[- \/.](0?[1-9]|[12][0-9]|3[01])[- \/.](19|20)?[0-9]{2})*$/"
     class="form-control" (change)="changeValue($event)"
     (blur)="onTouchedCallback()"/>
  <div class="input-group-btn">
    <button class="btn" (click)="show()">
        <i class="fa fa-calendar"></i></button>
 </div>

用户将能够在该字段中输入任何值，但他无法提交表单，系统将提示他输入所需的模式。

Angular2 中日期选择器的验证

Validation for date picker in Angular2

angular

validation

datepicker

directive