Angular DateTimePicker

Angular 日期選擇器，下載安裝，支持最新 Angular 13 版本。

Github

Demo

Install ng2-date-picker

npm install ng2-date-picker --save

app.module
⬇

@NgModule({ ... imports: [ ... DpDatePickerModule ] })

styles

angular.json
⬇

"styles": [
    ...
    "node_modules/@angular/cdk/overlay-prebuilt.css"
    ]

Install dayjs

npm install dayjs --save

import

app.component
⬇

import { Component } from '@angular/core';
import * as dayjs from 'dayjs';
import {DatePickerComponent, IDatePickerConfig} from 'ng2-date-picker';

ViewChild

@Component({
    ....
})
export class AppComponent {

    @ViewChild('dayPicker') datePicker!: DatePickerComponent;
...

Config

設定預設

datePickerConfig:IDatePickerConfig = {
  firstDayOfWeek: 'su',
  monthFormat: 'MMM, YYYY',
  disableKeypress: false,
  allowMultiSelect: false,
  closeOnSelect: undefined,
  closeOnSelectDelay: 100,
  openOnFocus: true,
  openOnClick: true,
  onOpenDelay: 0,
  weekDayFormat: 'ddd',
  showNearMonthDays: true,
  showWeekNumbers: false,
  enableMonthSelector: true,
  yearFormat: 'YYYY',
  showGoToCurrent: true,
  dayBtnFormat: 'DD',
  monthBtnFormat: 'MMM',
  hours12Format: 'hh',
  hours24Format: 'HH',
  meridiemFormat: 'A',
  minutesFormat: 'mm',
  minutesInterval: 1,
  secondsFormat: 'ss',
  secondsInterval: 1,
  showSeconds: false,
  showTwentyFourHours: false,
  timeSeparator: ':',
  multipleYearsNavigateBy: 10,
  showMultipleYearsNavigation: false,
  hideInputContainer: false,
  unSelectOnClick: true,
  hideOnOutsideClick: true,
  format: "YYYY-MM-DD HH:mm",
  min: this.set_Date(),
  max: this.set_Date(3),
}
  ....

onChange

取及時變更的日期

// Date Time Change
timePickerChange(e:any): void {
  const selectDate:any = new Date(e.$d);
  console.log(selectDate);
}

min & max

設定日期選擇器，最小日期和最大日期範圍。

// Date Time
set_Date(days:number = 0): string {

  const d = new Date();

  if(days != 0)
  {
    d.setDate(d.getDate()+days);
  }

  let month = '' + (d.getMonth() + 1);
  let day = '' + d.getDate();
  const year = d.getFullYear();
  const hr = d.getHours();
  const min = d.getMinutes();

  if (month.length < 2)
  {
    month = '0' + month;
  }

  if (day.length < 2)
  {
    day = '0' + day;
  }

  const datetime:string = [year, month, day].join('-')+' '+hr+':'+min+':00';

  return datetime;
}

Locale

ngOnInit(): void {
  this.change_Locale();
}

change_Locale(): void {
  import(`dayjs/locale/zh-tw`).then(() => {
    dayjs.locale('zh-tw');
  });
}

Html

<dp-date-picker theme="dp-material" mode="daytime"
[config]="datePickerConfig" placeholder="選擇日期" (onChange)="timePickerChange($event)">
</dp-date-picker>