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

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

<article>
  <section class="markdown"><h1>DatePicker 日期选择框</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-date-picker-demo-basic" [nzCode]="NzDemoDatePickerBasicCode">
        <nz-demo-datepicker-basic demo></nz-demo-datepicker-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'三种大小'" id="components-date-picker-demo-size" [nzCode]="NzDemoDatePickerSizeCode">
        <nz-demo-datepicker-size demo></nz-demo-datepicker-size>
        <div intro>
          <p>三种大小的输入框，大的用在表单中，中的为默认。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'禁用'" id="components-date-picker-demo-disabled" [nzCode]="NzDemoDatePickerDisabledCode">
        <nz-demo-datepicker-disabled demo></nz-demo-datepicker-disabled>
        <div intro>
          <p>选择框的不可用状态。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义日期范围选择'" id="components-date-picker-startEnd" [nzCode]="NzDemoDatePickerStartEndCode">
        <nz-demo-datepicker-start-end demo></nz-demo-datepicker-start-end>
        <div intro>
          <p>可以设置 <code>nzDisabledDate</code> 方法，来约束开始和结束日期。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'日期格式'" id="components-date-picker-demo-formatter" [nzCode]="NzDemoDatePickerFormatterCode">
        <nz-demo-datepicker-formatter demo></nz-demo-datepicker-formatter>
        <div intro>
          <p>使用 <code>nzFormat</code> 属性，可以自定义你需要的日期显示格式，如 <code>YYYY/MM/DD</code>。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'日期时间选择'" id="components-date-picker-demo-time" [nzCode]="NzDemoDatePickerTimeCode">
        <nz-demo-datepicker-time demo></nz-demo-datepicker-time>
        <div intro>
          <p>增加选择时间功能，当 <code>nzShowTime</code> 为一个对象时，其属性会传递给内建的 <code>nz-timepicker</code>。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'指定不可选择日期'" id="components-date-picker-demo-disable-date" [nzCode]="NzDemoDatePickerDisableDateCode">
        <nz-demo-datepicker-disable-date demo></nz-demo-datepicker-disable-date>
        <div intro>
          <p>设置 <code>nzDisabledDate</code> 方法，来确定不可选时段。</p>
          <p>如上例：不可选择今天之后的日期。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>日期类组件包括以下三种形式。</p>
    <ul>
      <li>nz-datepicker</li>
      <li>nz-datepicker [nzMode='month']</li>
      <li>nz-rangepicker</li>
    </ul>
    <h3>共同的 API</h3>
    <table>
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>nzSize</td>
        <td>输入框大小，<code>large</code> 高度为 32px，<code>small</code> 为 22px，默认是 28px</td>
        <td>String</td>
        <td>month</td>
      </tr>
      <tr>
        <td>nzFormat</td>
        <td>展示的日期格式，配置参考
          <a href="http://momentjs.cn/docs/#/parsing/string-formats/" target="_blank">Moment.js文档</a>
        </td>
        <td>String</td>
        <td>"YYYY-MM-DD"</td>
      </tr>
      <tr>
        <td>nzDisabled</td>
        <td>禁用</td>
        <td>boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>nzAllowClear</td>
        <td>是否显示清除按钮</td>
        <td>boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>nzShowTime</td>
        <td>时间选项,参见 nz-timepicker 参数</td>
        <td>boolean | NzTimePickerInnerComponent</td>
        <td>null</td>
      </tr>
      <tr>
        <td>nzDisabledDate</td>
        <td>用于禁用日期的回调函数，返回true表示禁用此日期</td>
        <td>(Date) => boolean</td>
        <td></td>
      </tr>
      </tbody>
    </table>
    <h3>nz-datepicker</h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>展示日期</td>
          <td>Date</td>
          <td>当前日期</td>
        </tr>
        <tr>
          <td>nzPlaceholder</td>
          <td>输入框提示文字</td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>nzMode</td>
          <td>选择器模式， <code>month</code> 只选择到月份，<code>day</code> 选择到天</td>
          <td>String</td>
          <td>"day"</td>
        </tr>
      </tbody>
    </table>
    <h3>nz-rangepicker</h3>
    <table>
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>ngModel</td>
        <td>展示日期</td>
        <td>[Date, Date]</td>
        <td>当前日期</td>
      </tr>
      <tr>
        <td>nzPlaceholder</td>
        <td>输入框提示文字</td>
        <td>[String, String]</td>
        <td></td>
      </tr>
      </tbody>
    </table>
  </section>
</article>