• DatePicker日期选择
    • 规则
  • 代码演示
  • API

    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日期选择的类型, 可以是日期date,时间time,日期+时间datetime,年year,月monthStringdate
    ngModel当前选中时间Date当前时间
    minDate最小可选日期Date2000-1-1
    maxDate最大可选日期Date2030-1-1
    minuteStep分钟数递增步长设置Number1
    locale国际化，可覆盖全局LocaleProvider的配置Object: {DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText }-
    disabled是否不可用Booleanfalse
    showErrorToast显示Toast错误信息Booleantrue
    showErrorToastIntervalToast错误信息显示时间number2000
    onValueChange每列 picker 改变时的回调({date: any, index: number}) => void-
    title弹框的标题string/React.TemplateRef无
    onOk点击选中时执行的回调(val): void无
    onDismiss点击取消时执行的回调(): void无

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

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