說明

日期比較麻煩就是有時候還需要 時和分，因此選擇使用 OwlDateTime

DEMO
https://danielykpan.github.io/date-time-picker/
教學文件
https://github.com/DanielYKPan/date-time-picker

修改日曆內容的檔案(owl-data-time-name.ts)，放在同 module 檔案位置

修改套件文字，下面修改的是 cancelBtnLabel = '取消';，setBtnLabel = '設定';

owl-data-time-name.ts

import { OwlDateTimeIntl } from 'ng-pick-datetime';
import { Injectable } from '@angular/core';

@Injectable()
// TimePicker 顯示提示文字
export class DefaultIntl extends OwlDateTimeIntl {
  /** A label for the up second button (used by screen readers).  */
  upSecondLabel = 'Add a second';

  /** A label for the down second button (used by screen readers).  */
  downSecondLabel = 'Minus a second';

  /** A label for the up minute button (used by screen readers).  */
  upMinuteLabel = 'Add a minute';

  /** A label for the down minute button (used by screen readers).  */
  downMinuteLabel = 'Minus a minute';

  /** A label for the up hour button (used by screen readers).  */
  upHourLabel = 'Add a hour';

  /** A label for the down hour button (used by screen readers).  */
  downHourLabel = 'Minus a hour';

  /** A label for the previous month button (used by screen readers). */
  prevMonthLabel = 'Previous month';

  /** A label for the next month button (used by screen readers). */
  nextMonthLabel = 'Next month';

  /** A label for the previous year button (used by screen readers). */
  prevYearLabel = 'Previous year';

  /** A label for the next year button (used by screen readers). */
  nextYearLabel = 'Next year';

  /** A label for the previous multi-year button (used by screen readers). */
  prevMultiYearLabel = 'Previous 21 years';

  /** A label for the next multi-year button (used by screen readers). */
  nextMultiYearLabel = 'Next 21 years';

  /** A label for the 'switch to month view' button (used by screen readers). */
  switchToMonthViewLabel = 'Change to month view';

  /** A label for the 'switch to year view' button (used by screen readers). */
  switchToMultiYearViewLabel = 'Choose month and year';

  /** A label for the cancel button */
  cancelBtnLabel = '取消';

  /** A label for the set button */
  setBtnLabel = '設定';

  /** A label for the range 'from' in picker info */
  rangeFromLabel = 'From';

  /** A label for the range 'to' in picker info */
  rangeToLabel = 'To';

  /** A label for the hour12 button (AM) */
  hour12AMLabel = 'AM';

  /** A label for the hour12 button (PM) */
  hour12PMLabel = 'PM';
};

cmd

npm install ng-pick-datetime --save

styles.css

用於產生日曆的樣式

@import "~ng-pick-datetime/assets/style/picker.min.css";

app.module.ts

{ provide: OWL_DATE_TIME_LOCALE, useValue: 'ZH-TW' }改成台灣日期格式
{ provide: OwlDateTimeIntl, useClass: DefaultIntl }套用 owl-data-time-name.ts 的 DefaultIntl

import { DefaultIntl } from './owl-data-time-name';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import {
    OwlDateTimeModule, OwlNativeDateTimeModule,
    OWL_DATE_TIME_LOCALE, OwlDateTimeIntl
} from 'ng-pick-datetime';

@NgModule({
imports: [
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
],
providers: [
    { provide: OWL_DATE_TIME_LOCALE, useValue: 'ZH-TW' },
    { provide: OwlDateTimeIntl, useClass: DefaultIntl },
],
})
export class AppModule { }