DatePicker日期选择

用于选择日期或者时间。

规则

  • 最多展示 5 个独立滚轮，每个滚轮表示一个不同的值。

代码演示

日期-年月日时分

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-basic',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value)"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'datetime'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Datetime
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerBasicComponent {
  30.   name = '选择';
  31.   value = new Date();
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

日期-年月日

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-date',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value, 'yyyy-mm-dd')"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'date'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Date
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerDateComponent {
  30.   name = '选择';
  31.   value = new Date();
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result, 'yyyy-mm-dd');
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

日期-年月

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-month',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value, 'yyyy-mm')"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'month'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Month
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerMonthComponent {
  30.   name = '选择';
  31.   value = new Date(2019, 4);
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

日期-时分

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-time',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value)"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'time'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Time
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerTimeComponent {
  30.   name = '选择';
  31.   value = new Date();
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

日期-时分

  1. import { Component, ViewEncapsulation } from '@angular/core';
  2. import { en_US } from 'ng-zorro-antd-mobile';
  4. @Component({
  5.   selector: 'demo-date-picker-utc-time',
  6.   encapsulation: ViewEncapsulation.None,
  7.   template: `
  8.     <List [className]="'date-picker-list'">
  9.       <ListItem
  10.         DatePicker
  11.         [extra]="currentDateFormat(value)"
  12.         [arrow]="'horizontal'"
  13.         [mode]="'time'"
  14.         [locale]="locale"
  15.         [(ngModel)]="value"
  16.         (onOk)="onOk($event)"
  17.       >
  18.         UTC Time
  19.         <Brief>{{ name }}</Brief>
  20.       </ListItem>
  21.     </List>
  22.   `,
  23.   styles: [
  24.     `
  25.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  26.         flex-basis: initial;
  27.       }
  28.     `
  29.   ]
  30. })
  31. export class DemoDatePickerUtcTimeComponent {
  32.   locale = en_US;
  33.   name = '选择';
  34.   nowTimeStamp = Date.now();
  35.   now = new Date(this.nowTimeStamp);
  36.   utcNow = new Date(this.now.getTime() + this.now.getTimezoneOffset() * 60000);
  37.   value = this.utcNow;
  39.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  40.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  41.     return format
  42.       .replace('yyyy', date.getFullYear())
  43.       .replace('mm', pad(date.getMonth() + 1))
  44.       .replace('dd', pad(date.getDate()))
  45.       .replace('HH', pad(date.getHours()))
  46.       .replace('MM', pad(date.getMinutes()))
  47.       .replace('ss', pad(date.getSeconds()));
  48.   }
  50.   onOk(result: Date) {
  51.     this.name = this.currentDateFormat(result);
  52.     this.value = result;
  53.   }
  55.   formatIt(date: Date, form: string) {
  56.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  57.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  58.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  59.     if (form === 'YYYY-MM-DD') {
  60.       return dateStr;
  61.     }
  62.     if (form === 'HH:mm') {
  63.       return timeStr;
  64.     }
  65.     return `${dateStr} ${timeStr}`;
  66.   }
  67. }

当前时间小于最小时间

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-min-date',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value)"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'datetime'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Min Date
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerMinDateComponent {
  30.   name = '当前时间小于最小时间';
  31.   value = new Date(1999, 1, 1, 1, 1);
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

当前时间大于最大时间

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-max-date',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [extra]="currentDateFormat(value)"
  11.         [arrow]="'horizontal'"
  12.         [mode]="'datetime'"
  13.         [(ngModel)]="value"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Max Date
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerMaxDateComponent {
  30.   name = '当前时间大于最大时间';
  31.   value = new Date(2031, 1, 1, 1, 1);
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

设置禁止使用

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-date-picker-disable',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <List [className]="'date-picker-list'">
  8.       <ListItem
  9.         DatePicker
  10.         [disabled]="true"
  11.         [extra]="currentDateFormat(value)"
  12.         [arrow]="'horizontal'"
  13.         [mode]="'datetime'"
  14.         (onOk)="onOk($event)"
  15.       >
  16.         Datetime
  17.         <Brief>{{ name }}</Brief>
  18.       </ListItem>
  19.     </List>
  20.   `,
  21.   styles: [
  22.     `
  23.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  24.         flex-basis: initial;
  25.       }
  26.     `
  27.   ]
  28. })
  29. export class DemoDatePickerDisableComponent {
  30.   name = '选择';
  31.   value = new Date();
  33.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  34.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.     return format
  36.       .replace('yyyy', date.getFullYear())
  37.       .replace('mm', pad(date.getMonth() + 1))
  38.       .replace('dd', pad(date.getDate()))
  39.       .replace('HH', pad(date.getHours()))
  40.       .replace('MM', pad(date.getMinutes()))
  41.       .replace('ss', pad(date.getSeconds()));
  42.   }
  44.   onOk(result: Date) {
  45.     this.name = this.currentDateFormat(result);
  46.     this.value = result;
  47.   }
  49.   formatIt(date: Date, form: string) {
  50.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  51.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  52.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  53.     if (form === 'YYYY-MM-DD') {
  54.       return dateStr;
  55.     }
  56.     if (form === 'HH:mm') {
  57.       return timeStr;
  58.     }
  59.     return `${dateStr} ${timeStr}`;
  60.   }
  61. }

DatePicker日期选择 - 图1

API

参数说明类型默认值
[mode]日期选择的类型‘year’ | ‘month’ | ‘date’ | ‘time’ | ‘datetime’‘date’
[minDate]最小可选日期Date2000-1-1
[maxDate]最大可选日期Date2030-1-1
[minuteStep]分钟数递增步长设置number1
[locale]国际化，可覆盖全局LocaleProvider的配置{DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText }-
[disabled]是否不可用booleanfalse
[showErrorToast]显示Toast错误信息booleantrue
[showErrorToastInterval]Toast错误信息显示时间number2000
[title]弹框的标题string | TemplateRef-
[(ngModel)]当前选中时间Datenew Date()
(onValueChange)每列 picker 改变时的回调EventEmitter<{date: object, index: string}>-
(onOk)点击选中时执行的回调EventEmitter<Date>-
(onDismiss)点击取消时执行的回调EventEmitter<void>-

注意：日期字符串在不同浏览器有不同的实现，例如 new Date('2017-1-1') 在 Safari 上是 Invalid Date，而在 Chrome 上是能正常解析的。

注意：DatePicker children 建议是 ListItem, 如果不是，需要是自定义组件(组件内需处理 onClick / extra / children 属性)