ace-component/src/app/date-picker-page/date-picker-page.component.html

ace-components for ewms

<div id='button' class='page-content'>
  <h3>
    datePicker <small style="margin-right:10px">日历</small><small>ace-date-picker</small>
  </h3>
  <p>使用 import AceDatePickerModule</p>
  <b>安装 cnpm install --save ng2-date-picker</b>
  <h5 class="text-warning">
    属性
  </h5>
  <table class='table-striped table-bordered table'>
    <tr>
      <th *ngFor='let th of thead'>{{th}}</th>
    </tr>
    <tr *ngFor='let item of tableValue'>
      <td *ngFor='let key of getKeys(item)'>
        <p [innerHTML]="key"></p>
      </td>
    </tr>
  </table>
  <h5 class="text-warning">
    事件
  </h5>
  <table class='table-striped table-bordered table'>
    <tr>
      <th *ngFor='let th of eventHd'>{{th}}</th>
    </tr>
    <tr *ngFor='let item of eventValue'>
      <td *ngFor='let key of getEventKeys(item)'>
        <p [innerHTML]="key"></p>
      </td>
    </tr>
  </table>
  <div class="block">
    <h5 class="text-warning">
      自定义placeholder
    </h5>
    <ace-date-picker placeholder='自定义时间' mode='day' (onchange)='fkbug($event)' #datePicker></ace-date-picker>
  </div>

  <div class="block">
    <h5 class="text-warning">
      设置最大时间，最小时间
    </h5>
    <ace-date-picker placeholder='自定义时间' mode='day' min='2017-09-21' max='2017-10-7'></ace-date-picker>
  </div>

  <div class="block">
    <h5 class="text-warning">
      mode 为 day
    </h5>
    <ace-date-picker mode='day'></ace-date-picker>
  </div>

  <div class="block">
    <h5 class="text-warning">
      onchange事件
    </h5>
    <p>时间为：{{onchangeValue}}</p>
    <ace-date-picker (onchange)='showChange($event)'></ace-date-picker>
  </div>
</div>