ng-ytl-zorro-antd/src/showcase/nz-demo-timepicker/nz-demo-timepicker.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>TimePicker 时间选择框</h1>
    <section class="markdown"><p>输入或选择时间的控件。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-time-picker-demo-basic" [nzCode]="NzDemoTimePickerBasicCode">
        <nz-demo-timepicker-basic demo></nz-demo-timepicker-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'三种大小'" id="components-time-picker-demo-size" [nzCode]="NzDemoTimePickerSizeCode">
        <nz-demo-timepicker-size demo></nz-demo-timepicker-size>
        <div intro>
          <p>三种大小的输入框，大的用在表单中，中的为默认。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'禁用'" id="components-time-picker-demo-disabled" [nzCode]="NzDemoTimePickerDisabledCode">
        <nz-demo-timepicker-disabled demo></nz-demo-timepicker-disabled>
        <div intro>
          <p>禁用时间选择。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'只显示部分选项'" id="components-time-picker-demo-hide-options" [nzCode]="NzDemoTimePickerHideOptionsCode">
        <nz-demo-timepicker-hide-options demo></nz-demo-timepicker-hide-options>
        <div intro>
          <p>通过 <code>nzHideDisabledOptions</code> 将不可选的选项隐藏。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'受控组件'" id="components-time-picker-demo-change" [nzCode]="NzDemoTimePickerChangeCode">
        <nz-demo-timepicker-change demo></nz-demo-timepicker-change>
        <div intro>
          <p>nzValue 和 nzValueChange 需要配合使用。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'不展示秒'" id="components-time-picker-demo-without-seconds" [nzCode]="NzDemoTimePickerWithoutSecondsCode">
        <nz-demo-timepicker-without-seconds demo></nz-demo-timepicker-without-seconds>
        <div intro>
          <p>不展示秒，也不允许选择。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'禁止选项'" id="components-time-picker-demo-disabled-options" [nzCode]="NzDemoTimePickerDisabledOptionsCode">
        <nz-demo-timepicker-disabled-options demo></nz-demo-timepicker-disabled-options>
        <div intro>
          <p>限制选择 <code>20:30</code> 到 <code>23:30</code> 这个时间段。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>默认时间</td>
          <td>string or Date</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>设置TimePicker大小</td>
          <td>'large'|'small'|'default'</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzPlaceHolder</td>
          <td>没有值的时候显示的内容</td>
          <td>String</td>
          <td>"请选择时间"</td>
        </tr>
        <tr>
          <td>nzFormat</td>
          <td>展示的时间格式</td>
          <td>String</td>
          <td>"HH:mm:ss"、"HH:mm"、"mm:ss"</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>禁用全部操作</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzDisabledHours</td>
          <td>禁止选择部分小时选项</td>
          <td>function()</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzDisabledMinutes</td>
          <td>禁止选择部分分钟选项</td>
          <td>function(selectedHour)</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzDisabledSeconds</td>
          <td>禁止选择部分秒选项</td>
          <td>function(selectedHour, selectedMinute)</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzHideDisabledOptions</td>
          <td>添加该属性来隐藏禁止选择的选项</td>
          <td>attribute</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>