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。

更新了Regrex

<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中的日期选择器

1 个答案: