DatePicker日期选择

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

日期-年月日时分

日期-年月日

  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-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.     </List>
  19.   `,
  20.   styles: [
  21.     `
  22.       .date-picker-list .am-list-item .am-list-line .am-list-extra {
  23.         flex-basis: initial;
  24.       }
  25.     `
  26.   ]
  27. })
  28. export class DemoDatePickerTimeComponent {
  29.   name = '选择';
  30.   value = new Date();
  32.   currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM'): any {
  33.     const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  35.       .replace('yyyy', date.getFullYear())
  36.       .replace('mm', pad(date.getMonth() + 1))
  37.       .replace('dd', pad(date.getDate()))
  38.       .replace('HH', pad(date.getHours()))
  39.       .replace('MM', pad(date.getMinutes()))
  40.       .replace('ss', pad(date.getSeconds()));
  41.   }
  43.   onOk(result: Date) {
  44.     this.name = this.currentDateFormat(result);
  45.     this.value = result;
  46.   }
  48.   formatIt(date: Date, form: string) {
  49.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  50.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  51.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  52.     if (form === 'YYYY-MM-DD') {
  53.       return dateStr;
  54.     }
  55.     if (form === 'HH:mm') {
  56.       return timeStr;
  57.     }
  58.     return `${dateStr} ${timeStr}`;
  59.   }
  60. }

日期-时分

当前时间小于最小时间

  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('ss', pad(date.getSeconds()));
  41.   }
  43.   onOk(result: Date) {
  44.     this.name = this.currentDateFormat(result);
  45.     this.value = result;
  46.   }
  48.   formatIt(date: Date, form: string) {
  49.     const pad = (n: number) => (n < 10 ? `0${n}` : n);
  50.     const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  51.     const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  52.     if (form === 'YYYY-MM-DD') {
  53.       return dateStr;
  54.     }
  55.     if (form === 'HH:mm') {
  56.       return timeStr;
  57.     }
  58.     return `${dateStr} ${timeStr}`;
  59.   }
  60. }

当前时间大于最大时间

  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'">
  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. }

API

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

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