DatePickerView选择器

DatePickerView 的功能类似于 DatePicker ,但它是直接渲染在区域中,而不是弹出窗口。

代码演示

选择器

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-date-picker-view-basic',
  4. template: `
  5. <div class="sub-title">Start datetime {{getDate(value1)}}</div>
  6. <DatePickerView [(ngModel)]="value1" (onValueChange)="onValueChange($event)"></DatePickerView>
  7. `,
  8. styles: [
  9. `
  10. .sub-title {
  11. margin: 8px;
  12. }
  13. `
  14. ]
  15. })
  16. export class DemoDatePickerViewBasicComponent {
  17. name1 = '选择';
  18. name2 = '选择';
  19. mode = 'date';
  20. value1 = new Date(2018, 8, 15, 8, 0);
  21. value2 = new Date();
  22. currentDateFormat(date, format: string = 'yyyy-mm-dd HH:MM:ss'): any {
  23. const pad = (n: number): string => (n < 10 ? `0${n}` : n.toString());
  24. return format
  25. .replace('yyyy', date.getFullYear())
  26. .replace('mm', pad(date.getMonth() + 1))
  27. .replace('dd', pad(date.getDate()))
  28. .replace('HH', pad(date.getHours()))
  29. .replace('MM', pad(date.getMinutes()))
  30. .replace('ss', pad(date.getSeconds()));
  31. }
  32. getDate(result) {
  33. let format = 'yyyy-mm-dd';
  34. if (this.mode === 'year') {
  35. format = 'yyyy';
  36. } else if (this.mode === 'month') {
  37. format = 'yyyy-mm';
  38. } else if (this.mode === 'date') {
  39. format = 'yyyy-mm-dd';
  40. } else if (this.mode === 'datetime') {
  41. format = 'yyyy-mm-dd HH:MM';
  42. } else {
  43. format = 'HH:MM';
  44. }
  45. this.value1 = result;
  46. return this.currentDateFormat(result, format);
  47. }
  48. onValueChange(event) {
  49. console.log(event);
  50. }
  51. formatIt(date: Date, form: string) {
  52. const pad = (n: number) => (n < 10 ? `0${n}` : n);
  53. const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  54. const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  55. if (form === 'YYYY-MM-DD') {
  56. return dateStr;
  57. }
  58. if (form === 'HH:mm') {
  59. return timeStr;
  60. }
  61. return `${dateStr} ${timeStr}`;
  62. }
  63. }

DatePickerView 选择器 - 图1

API

属性说明类型默认值
mode日期选择的类型, 可以是日期date,时间time,日期+时间datetime,年year,月monthStringdate
ngModel当前选中时间Date
minDate最小可选日期Date2000-1-1
maxDate最大可选日期Date2030-1-1
locale国际化,可覆盖全局LocaleProvider的配置Object: {DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText }-
disabled是否不可用Booleanfalse
onChange时间发生变化的回调函数(date: Object): void-
onValueChange每列 picker 改变时的回调(vals: any, index: number) => void-
indicatorStylestyle of indicatorObject-
showErrorToast显示Toast错误信息Booleantrue
showErrorToastIntervalToast错误信息显示时间number2000