ng-devui
Version:
DevUI components based on Angular
702 lines • 151 kB
JavaScript
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, Renderer2, TemplateRef, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { I18nService } from 'ng-devui/i18n';
import { DefaultDateConverter, unshiftString } from 'ng-devui/utils';
import { SelectDateChangeReason } from './date-change-event-args.model';
import { DatePickerConfigService as DatePickerConfig } from './date-picker.config.service';
import * as i0 from "@angular/core";
import * as i1 from "./date-picker.config.service";
import * as i2 from "ng-devui/i18n";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "ng-devui/button";
export class DatepickerComponent {
static { this.DAY_DURATION = 24 * 60 * 60 * 1000; }
constructor(elementRef, renderer2, datePickerConfig, changeDetectorRef, i18n) {
this.elementRef = elementRef;
this.renderer2 = renderer2;
this.datePickerConfig = datePickerConfig;
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.selectedDateChange = new EventEmitter();
this.disabled = false;
this.mode = 'date';
this.yearNumber = 12;
this._yearNumber = 12;
this.onChange = (_) => null;
this.onTouched = () => null;
this.clearAll = (reason) => {
this.writeValue(null);
this.selectedDate = null;
const currentReason = typeof reason === 'number' ? reason : SelectDateChangeReason.custom;
const dateObj = {
reason: currentReason,
selectedDate: null,
};
// 清空时将null作为ngModelChange参数传出
this.onChange(dateObj);
this.selectedDateChange.emit(dateObj);
};
this.chooseDate = (date, event = {}, reason = SelectDateChangeReason.custom) => {
const parseDate = this.dateConverter.parse(date, this.dateFormat);
this.selectedDate = parseDate || new Date();
this.onSelectDateChanged();
this.onSelectDate(event, parseDate, undefined, reason);
};
this._dateConfig = datePickerConfig.dateConfig;
this.dateConverter = datePickerConfig.dateConfig.dateConverter || new DefaultDateConverter();
this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'inline-block');
this.setI18nText();
}
ngOnInit() {
this._minDate = this.minDate ? new Date(this.minDate) : new Date(this.dateConfig.min, 0, 1, 0, 0, 0);
this._maxDate = this.maxDate ? new Date(this.maxDate) : new Date(this.dateConfig.max, 11, 31, 23, 59, 59);
this.hourOptions = new Array(24).fill(0).map((value, index) => this.fillLeft(index));
this.minuteOptions = new Array(60).fill(0).map((value, index) => this.fillLeft(index));
const nowDate = this.selectedDate || new Date();
this.nowMinYear =
nowDate.getFullYear() - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear()
? this.minDate.getFullYear()
: nowDate.getFullYear() - Math.floor(this._yearNumber / 2);
this.nowMaxYear =
nowDate.getFullYear() + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear()
? this.maxDate.getFullYear()
: nowDate.getFullYear() + Math.floor(this._yearNumber / 2);
this.initMode();
this.onSelectDateChanged();
this.onDisplayWeeksChange();
this.onYearRangeChange();
this.initDatePicker();
}
initMode() {
if (this.mode === 'year') {
this.openChooseYear = true;
this.openChooseMonth = false;
if (!this.selectedDate) {
this.selectedDate = new Date();
}
if (this.maxDate.getTime() < this.selectedDate.getTime()) {
this.selectedDate = new Date(this.maxDate);
}
if (this.minDate.getTime() > this.selectedDate.getTime()) {
this.selectedDate = new Date(this.minDate);
}
}
else if (this.mode === 'month') {
this.openChooseYear = false;
this.openChooseMonth = true;
if (!this.selectedDate) {
this.selectedDate = new Date();
}
if (this.maxDate.getTime() < this.selectedDate.getTime()) {
this.selectedDate = new Date(this.maxDate);
}
if (this.minDate.getTime() > this.selectedDate.getTime()) {
this.selectedDate = new Date(this.minDate);
}
}
else {
this.openChooseYear = this.openChooseMonth = false;
}
}
ngOnChanges(changes) {
if (changes?.selectedDate?.currentValue) {
this.writeValue(this.selectedDate);
}
}
onDocumentClick($event) {
if (!this.elementRef.nativeElement.contains($event.target)) {
this.openChooseYear = this.openChooseMonth = false;
this.resetYearOptions();
}
}
onClick($event) {
$event.stopPropagation();
}
set showTime(showTime) {
this._showTime = showTime;
}
get showTime() {
return typeof this._showTime === 'boolean' ? this._showTime : this.dateConfig.timePicker;
}
set dateConfig(dateConfig) {
if (this.checkDateConfig(dateConfig)) {
this._dateConfig = dateConfig;
}
else {
this._dateConfig = this.datePickerConfig.dateConfig;
}
}
get dateConfig() {
return this._dateConfig;
}
checkDateConfig(dateConfig) {
if (!dateConfig) {
return false;
}
if (typeof dateConfig.timePicker !== 'boolean' || !dateConfig.max || !dateConfig.min) {
return false;
}
return true;
}
set minDate(date) {
const parseDate = this.dateConverter.parse(date, this.dateFormat);
if (parseDate) {
this._minDate = parseDate;
this.onYearRangeChange();
}
}
get minDate() {
return this._minDate;
}
set maxDate(date) {
const parseDate = this.dateConverter.parse(date, this.dateFormat);
if (parseDate) {
this._maxDate = parseDate;
this.onYearRangeChange();
}
}
get maxDate() {
return this._maxDate;
}
set currentHour(hour) {
this._currentHour = hour;
}
get currentHour() {
return unshiftString(String(this._currentHour), 2, '0');
}
set currentMinute(min) {
this._currentMinute = min;
}
get currentMinute() {
return unshiftString(String(this._currentMinute), 2, '0');
}
set currentSecond(sec) {
this._currentSecond = sec;
}
get currentSecond() {
return unshiftString(String(this._currentSecond), 2, '0');
}
resetYearOptions() {
this.initMode();
const baseYear = this.selectedDate ? this.selectedDate.getFullYear() : new Date().getFullYear();
this.currentYear = baseYear;
this.nowMinYear =
baseYear - Math.floor(this._yearNumber / 2) < this.minDate.getFullYear()
? this.minDate.getFullYear()
: baseYear - Math.floor(this._yearNumber / 2);
this.nowMaxYear =
baseYear + Math.floor(this._yearNumber / 2) > this.maxDate.getFullYear()
? this.maxDate.getFullYear()
: baseYear + Math.floor(this._yearNumber / 2);
this.onYearRangeChange();
}
onYearRangeChange() {
if (!this.nowMinYear || !this.nowMaxYear) {
return;
}
let baseYear = Math.round((this.nowMinYear + this.nowMaxYear) / 2);
if (this.nowMaxYear - this.nowMinYear < this._yearNumber - 1) {
if (this.nowMinYear === this.minDate.getFullYear() && this.nowMaxYear === this.maxDate.getFullYear()) {
baseYear = this.nowMinYear + Math.round((this.nowMaxYear - this.nowMinYear) / 2);
}
else if (this.nowMinYear === this.minDate.getFullYear()) {
baseYear = this.nowMaxYear - this._yearNumber / 2 + 1;
}
else if (this.nowMaxYear === this.maxDate.getFullYear()) {
baseYear = this.nowMinYear + this._yearNumber / 2;
}
}
this.yearOptions = new Array(this._yearNumber).fill(0).map((value, index) => {
const title = baseYear - this._yearNumber / 2 + index;
return {
title: title,
disabled: false,
};
});
if (this._yearNumber > this.nowMaxYear - this.nowMinYear + 1) {
this.yearOptions.forEach((value, index) => {
if (index < 6) {
value.disabled = value.title < this.nowMinYear;
}
else {
value.disabled = value.title > this.nowMaxYear;
}
});
}
}
writeValue(obj) {
if (!obj) {
return;
}
this.selectedDate = this.dateConverter.parse(obj, this.dateFormat);
this.onSelectDateChanged();
this.onDisplayWeeksChange();
this.availableMonths = this.onDisplayMonthsChange();
this.changeDetectorRef.markForCheck();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
hasPreMonth() {
if (this.currentYear > this.minDate.getFullYear()) {
return true;
}
else if (this.currentYear === this.minDate.getFullYear() && this.currentMonthIndex > this.minDate.getMonth()) {
return true;
}
else {
return false;
}
}
onPreMonth() {
if (!this.hasPreMonth()) {
return;
}
const date = new Date(this.currentYear, this.currentMonthIndex);
date.setMonth(date.getMonth() - 1);
this.currentMonthIndex = date.getMonth();
this.currentYear = date.getFullYear();
this.onDisplayWeeksChange();
}
hasNextMonth() {
if (this.currentYear < this.maxDate.getFullYear()) {
return true;
}
else if (this.currentYear === this.maxDate.getFullYear() && this.currentMonthIndex < this.maxDate.getMonth()) {
return true;
}
else {
return false;
}
}
onNextMonth(currentDate, invocation) {
if (!this.hasNextMonth() && invocation !== 'init') {
return;
}
let date;
if (currentDate) {
date = new Date(currentDate.getTime());
}
else {
date = new Date(this.currentYear, this.currentMonthIndex);
}
date.setMonth(date.getMonth() + 1);
this.currentMonthIndex = date.getMonth();
this.currentYear = date.getFullYear();
this.onDisplayWeeksChange();
}
hasPreYearOption() {
if (this.openChooseYear) {
return this.yearOptions[0].title.toString() > this.minDate.getFullYear();
}
else {
return Number(this.currentYear) > this.minDate.getFullYear();
}
}
onPreYearOption() {
if (!this.hasPreYearOption()) {
return;
}
if (this.openChooseYear) {
if (this.nowMinYear - this._yearNumber >= this.minDate.getFullYear()) {
this.nowMaxYear = this.nowMinYear - 1;
this.nowMinYear = this.nowMinYear - this._yearNumber;
}
else {
this.nowMaxYear = this.nowMinYear - 1;
this.nowMinYear = this.minDate.getFullYear();
}
this.onYearRangeChange();
}
else {
this.onSelectYear(Number(this.currentYear) - 1);
}
}
hasNextYearOption() {
if (this.openChooseYear) {
return this.yearOptions[11].title.toString() < this.maxDate.getFullYear();
}
else {
return Number(this.currentYear) < this.maxDate.getFullYear();
}
}
onNextYearOption() {
if (!this.hasNextYearOption()) {
return;
}
if (this.openChooseYear) {
if (this.nowMaxYear + this._yearNumber <= this.maxDate.getFullYear()) {
this.nowMinYear = this.nowMaxYear + 1;
this.nowMaxYear = this.nowMaxYear + this._yearNumber;
}
else {
this.nowMinYear = this.nowMaxYear + 1;
this.nowMaxYear = this.maxDate.getFullYear();
}
this.onYearRangeChange();
}
else {
this.onSelectYear(Number(this.currentYear) + 1);
}
}
onSelectYear(year, $event) {
if ($event) {
$event.stopPropagation();
}
const yearDisabled = typeof year === 'object' ? year.disabled : false;
const yearTitle = typeof year === 'object' ? year.title : year;
if (yearDisabled) {
return;
}
this.currentYear = yearTitle;
if (this.mode === 'year') {
this.onSelectDate($event, new Date(yearTitle, 0, 1));
}
else if (this.mode === 'month') {
this.openChooseYear = false;
this.availableMonths = this.onDisplayMonthsChange();
this.currentMonthIndex = null;
this.openChooseMonth = true;
}
else {
this.onDisplayWeeksChange();
this.availableMonths = this.onDisplayMonthsChange();
this.openChooseYear = false;
this.openChooseMonth = !!$event;
}
}
onSelectDateChanged() {
let date = this.selectedDate || new Date();
if (date.getTime() < this.minDate.getTime()) {
date = this.minDate;
}
if (date.getTime() > this.maxDate.getTime()) {
date = this.maxDate;
}
this.currentYear = date.getFullYear();
this.currentMonthIndex = date.getMonth();
this.currentHour = this.showTime ? date.getHours() : 0;
this.currentMinute = this.showTime ? date.getMinutes() : 0;
this.currentSecond = this.showTime ? date.getSeconds() : 0;
}
onDisplayWeeksChange() {
const today = new Date();
const firstDayOfMonth = new Date(this.currentYear, this.currentMonthIndex, 1);
const weekOfDay = firstDayOfMonth.getDay();
const startDate = new Date(firstDayOfMonth.getTime() - weekOfDay * DatepickerComponent.DAY_DURATION);
const displayWeeks = [];
for (let i = 0; i < 6; i++) {
const startWeekDate = startDate.getTime() + i * 7 * DatepickerComponent.DAY_DURATION;
const weekDays = new Array(7).fill(0).map((value, index) => {
const currentDate = new Date(startWeekDate + index * DatepickerComponent.DAY_DURATION);
return {
day: this.fillLeft(currentDate.getDate()),
date: currentDate,
inMonth: currentDate.getMonth().toString() === this.currentMonthIndex.toString(),
isToday: currentDate.getFullYear() === today.getFullYear() &&
currentDate.getMonth() === today.getMonth() &&
currentDate.getDate() === today.getDate(),
};
});
displayWeeks.push(weekDays);
}
this.displayWeeks = displayWeeks;
}
onDisplayMonthsChange() {
const all = new Array(12).fill(0).map((value, index) => {
return {
index: index,
title: this.i18nText.monthsOfYear[index],
disabled: false,
};
});
if (this.currentYear < this.minDate.getFullYear() || this.currentYear > this.maxDate.getFullYear()) {
all.forEach((month) => {
month.disabled = true;
});
}
if (this.currentYear === this.minDate.getFullYear()) {
all.forEach((month) => {
month.disabled = month.index < this.minDate.getMonth();
});
}
if (this.currentYear === this.maxDate.getFullYear()) {
all.forEach((month) => {
month.disabled = month.index > this.maxDate.getMonth();
});
}
return all;
}
fillLeft(num) {
return num < 10 ? `0${num}` : `${num}`;
}
isDisabledDay(date) {
if (this.disabled) {
return true;
}
if (!date) {
return false;
}
const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate());
const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate(), 23, 59, 59);
const dis = date.getTime() < minDate.getTime();
return this.disabled || date.getTime() < minDate.getTime() || date.getTime() > maxDate.getTime();
}
isSelectDay(date) {
if (!this.selectedDate || !date) {
return false;
}
return (date.getFullYear() === this.selectedDate.getFullYear() &&
date.getMonth() === this.selectedDate.getMonth() &&
date.getDate() === this.selectedDate.getDate());
}
/*
** @param invocation:调用时机
*/
onSelectDate($event, date, invocation, reason) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if (this.isDisabledDay(date)) {
return;
}
this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond));
const currentReason = typeof reason === 'number' ? reason : SelectDateChangeReason.date;
const dateObj = {
reason: currentReason,
selectedDate: this.selectedDate,
};
this.onTouched();
this.writeValue(this.selectedDate);
// 初始化的时候不触发emit和ngModelChange
if (invocation !== 'init') {
this.onChange(dateObj);
this.selectedDateChange.emit(dateObj);
}
if (this.currentMonthIndex !== this.selectedDate.getMonth() || this.currentYear !== this.selectedDate.getFullYear()) {
this.currentYear = this.selectedDate.getFullYear();
this.currentMonthIndex = this.selectedDate.getMonth();
this.onDisplayWeeksChange();
}
}
fixTime(event, type) {
// 由于keypress不监听微软输入法需要使用keydown
// 而keydown中微软输入法的key是'Process'，且keydown没有charCode，所以需要用code判断
// 故退格和输入使用同一个事件
let timeType;
const min = 0;
let max = 59;
switch (type) {
case 'h': {
timeType = 'currentHour';
max = 23;
break;
}
case 'm': {
timeType = 'currentMinute';
break;
}
case 's': {
timeType = 'currentSecond';
break;
}
default:
}
let value = event.target.value;
const selectionStart = event.target.selectionStart;
const selectionEnd = event.target.selectionEnd;
// 是数字的时候再处理，分为小键盘和数字键
if (/^(Digit|Numpad)\d$/.test(event.code)) {
event.preventDefault();
let input;
if (event.clipboardData) {
input = event.clipboardData.getData('text');
}
else if (event.code) {
input = event.code.slice(event.code.length - 1);
}
value = value.substring(0, selectionStart) + input + value.substring(selectionEnd);
if (value.length === 3 && value.indexOf('0') === 0) {
value = value.slice(1);
}
}
else if (event.keyCode === 8) {
event.preventDefault();
value = value.substring(0, selectionStart - 1) + value.substring(selectionEnd);
if (value.length < 2) {
value = '0' + value;
}
}
else if (!(event.keyCode >= 37 && event.keyCode <= 40)) {
// 如果不是上下左右，就阻拦，执行自己的处理
event.preventDefault();
}
if (/^(Digit|Numpad)\d$/.test(event.code) || event.keyCode === 8) {
if (Number(value) >= min && Number(value) <= max) {
this[timeType] = value;
this.onTimeChange();
}
}
}
onTimeChange() {
const date = this.selectedDate || new Date();
this.selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond));
const dateObj = {
reason: SelectDateChangeReason.time,
selectedDate: this.selectedDate,
};
this.onTouched();
this.writeValue(this.selectedDate);
this.onChange(dateObj);
this.selectedDateChange.emit(dateObj);
}
timeUp(type) {
switch (type) {
case 'h': {
Number(this.currentHour) < 23 ? (this.currentHour = Number(this.currentHour) + 1) : (this.currentHour = 0);
break;
}
case 'm': {
Number(this.currentMinute) < 59 ? (this.currentMinute = Number(this.currentMinute) + 1) : (this.currentMinute = 0);
break;
}
case 's': {
Number(this.currentSecond) < 59 ? (this.currentSecond = Number(this.currentSecond) + 1) : (this.currentSecond = 0);
break;
}
default:
}
this.onTimeChange();
}
timeDown(type) {
switch (type) {
case 'h': {
Number(this.currentHour) > 0 ? (this.currentHour = Number(this.currentHour) - 1) : (this.currentHour = 23);
break;
}
case 'm': {
Number(this.currentMinute) > 0 ? (this.currentMinute = Number(this.currentMinute) - 1) : (this.currentMinute = 59);
break;
}
case 's': {
Number(this.currentSecond) > 0 ? (this.currentSecond = Number(this.currentSecond) - 1) : (this.currentSecond = 59);
break;
}
default:
}
this.onTimeChange();
}
toggle($event, which) {
$event.stopPropagation();
if (which === 'year') {
if (this.mode === 'year') {
return;
}
else if (this.mode === 'month') {
this.openChooseYear = true;
this.openChooseMonth = false;
return;
}
else {
this.openChooseYear = !this.openChooseYear;
this.openChooseMonth = false;
}
}
else {
if (this.mode === 'month') {
return;
}
this.openChooseMonth = !this.openChooseMonth;
this.openChooseYear = false;
}
}
isTodayDisable() {
return this.isDisabledDay(new Date());
}
isDisabledTime() {
return this.isDisabledDay(this.selectedDate);
}
initDatePicker() {
this.selectedDate = this.selectedDate ? this.selectedDate : new Date();
if (this.isDisabledDay(this.selectedDate)) {
return;
}
this.selectedDate = this.selectedDate ? this.selectedDate : new Date();
this.onSelectDateChanged();
this.onSelectDate({}, this.selectedDate, 'init');
}
confirmTime(event) {
event.stopPropagation();
const dateObj = {
reason: SelectDateChangeReason.button,
selectedDate: this.selectedDate,
};
this.writeValue(this.selectedDate);
this.onChange(dateObj);
this.selectedDateChange.emit(dateObj);
}
chooseToday() {
const today = new Date();
if (this.isDisabledDay(today)) {
return;
}
this.selectedDate = today;
this.onSelectDateChanged();
this.onSelectDate({}, today, undefined, SelectDateChangeReason.button);
}
onSelectMonth(month) {
if (month.disabled) {
return;
}
this.currentMonthIndex = month.index;
if (this.mode === 'month') {
this.onSelectDate({}, new Date(this.currentYear, this.currentMonthIndex, 1));
}
else {
this.onDisplayWeeksChange();
this.openChooseMonth = false;
}
}
get minDateDefined() {
return this.minDate.getTime() !== new Date(this.dateConfig.min, 0, 1, 0, 0, 0).getTime();
}
get maxDateDefined() {
return this.maxDate.getTime() !== new Date(this.dateConfig.max, 11, 31, 23, 59, 59).getTime();
}
setI18nText() {
this.i18nText = this.i18n.getI18nText().datePicker;
this.i18nLocale = this.i18n.getI18nText().locale;
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nText = data.datePicker;
this.i18nLocale = data.locale;
this.i18nCommonText = data.common;
});
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DatePickerConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "d-datepicker", inputs: { cssClass: "cssClass", dateConverter: "dateConverter", locale: "locale", disabled: "disabled", customViewTemplate: "customViewTemplate", selectedDate: "selectedDate", mode: "mode", dateFormat: "dateFormat", showTime: "showTime", dateConfig: "dateConfig", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedDateChange: "selectedDateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "click": "onClick($event)" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatepickerComponent),
multi: true,
},
], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-month-view {{ cssClass }}\">\n <table class=\"devui-table devui-month-view-table\">\n <thead class=\"devui-noSelect\">\n <tr class=\"devui-date-header\">\n <td>\n <a\n class=\"devui-btn-link\"\n aria-hidden=\"true\"\n (click)=\"onPreYearOption()\"\n [ngClass]=\"{\n 'devui-year-month-disabled': !hasPreYearOption()\n }\"\n >\n <svg\n width=\"10px\"\n height=\"10px\"\n viewBox=\"0 0 10 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1.000000, -1.000000)\">\n <path\n d=\"M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </a>\n </td>\n <td>\n <a\n *ngIf=\"!openChooseYear && !openChooseMonth\"\n class=\"devui-btn-link devui-btn-left\"\n aria-hidden=\"true\"\n (click)=\"onPreMonth()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasPreMonth() }\"\n >\n <svg\n width=\"6px\"\n height=\"10px\"\n viewBox=\"0 0 6 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-3.000000, -1.000000)\">\n <polygon\n transform=\"translate(6.000000, 6.000000) rotate(-90.000000) translate(-6.000000, -6.000000) \"\n points=\"6 3 10.1666667 9 1.83333333 9\"\n ></polygon>\n </g>\n </g>\n </svg>\n </a>\n </td>\n <td colspan=\"3\" class=\"devui-dropdown\">\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'month')\" *ngIf=\"mode !== 'year' && i18nLocale === 'en-us'\">{{\n (i18nText?.monthsOfYear)[currentMonthIndex]\n }}</span>\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'year')\"> {{ i18nText?.yearDisplay(currentYear) }} </span>\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'month')\" *ngIf=\"mode !== 'year' && i18nLocale === 'zh-cn'\">{{\n (i18nText?.monthsOfYear)[currentMonthIndex]\n }}</span>\n <ul class=\"devui-monthOption text-center\" [style.display]=\"openChooseMonth ? 'block' : 'none'\">\n <li\n *ngFor=\"let month of availableMonths\"\n [ngClass]=\"{ active: currentMonthIndex == month.index, disabled: month.disabled }\"\n (click)=\"onSelectMonth(month)\"\n >\n {{ month.title }}\n </li>\n </ul>\n <ul class=\"devui-yearOption text-center\" [style.display]=\"openChooseYear ? 'block' : 'none'\">\n <li\n *ngFor=\"let item of yearOptions\"\n [ngClass]=\"{ active: currentYear == item.title, disabled: item.disabled }\"\n (click)=\"onSelectYear(item, $event)\"\n >\n {{ item.title }}\n </li>\n </ul>\n </td>\n <td>\n <a\n *ngIf=\"!openChooseYear && !openChooseMonth\"\n class=\"devui-btn-link devui-btn-right\"\n aria-hidden=\"true\"\n (click)=\"onNextMonth()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasNextMonth() }\"\n >\n <svg\n width=\"6px\"\n height=\"9px\"\n viewBox=\"0 0 6 9\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-3.000000, -2.000000)\">\n <polygon\n transform=\"translate(6.000000, 6.166667) scale(-1, 1) rotate(-90.000000) translate(-6.000000, -6.166667) \"\n points=\"6 3.16666667 10.1666667 9.16666667 1.83333333 9.16666667\"\n ></polygon>\n </g>\n </g>\n </svg>\n </a>\n </td>\n <td>\n <a\n class=\"devui-btn-link\"\n aria-hidden=\"true\"\n (click)=\"onNextYearOption()\"\n [ngClass]=\"{\n 'devui-year-month-disabled': !hasNextYearOption()\n }\"\n >\n <svg\n width=\"10px\"\n height=\"9px\"\n viewBox=\"0 0 10 9\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1.000000, -2.000000)\">\n <polygon points=\"5 4.77777778 5 2 11 6.16666667 5 10.3333333 5 7.55555556 1 10.3333333 1 2\"></polygon>\n </g>\n </g>\n </svg>\n </a>\n </td>\n </tr>\n <tr class=\"small text-center devui-week-header\">\n <td *ngFor=\"let item of i18nText?.daysOfWeek\">{{ item }}</td>\n </tr>\n </thead>\n <tbody class=\"devui-noSelect\">\n <tr *ngFor=\"let week of displayWeeks\">\n <td\n *ngFor=\"let day of week\"\n class=\"devui-day\"\n [ngClass]=\"{\n 'devui-out-of-month': !day.inMonth,\n 'devui-in-month-day': day.inMonth,\n active: isSelectDay(day.date),\n disabled: isDisabledDay(day.date),\n 'devui-today': day.isToday\n }\"\n (click)=\"onSelectDate($event, day.date)\"\n >\n <div class=\"devui-calendar-date\">{{ day.day }}</div>\n </td>\n </tr>\n </tbody>\n <tfoot [ngClass]=\"{ 'devui-noSelect': !customViewTemplate }\">\n <tr class=\"time-picker-view\" (click)=\"!customViewTemplate && $event.stopPropagation()\" *ngIf=\"showTime || !customViewTemplate\">\n <td colspan=\"4\">\n <div class=\"devui-timepicker\" *ngIf=\"showTime\" [ngClass]=\"{ 'devui-timepicker-disabled': isDisabledTime() }\">\n <div class=\"devui-time\">\n <input [ngModel]=\"currentHour\" (keydown)=\"fixTime($event, 'h')\" [disabled]=\"isDisabledTime()\" />\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\n <div class=\"btn-up\" (click)=\"timeUp('h')\"></div>\n <div class=\"btn-down\" (click)=\"timeDown('h')\"></div>\n </div>\n </div>\n <div class=\"devui-time\">\n <input class=\"devui-minutes\" [ngModel]=\"currentMinute\" (keydown)=\"fixTime($event, 'm')\" [disabled]=\"isDisabledTime()\" />\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\n <div class=\"btn-up\" (click)=\"timeUp('m')\"></div>\n <div class=\"btn-down\" (click)=\"timeDown('m')\"></div>\n </div>\n </div>\n <div class=\"devui-time\">\n <input class=\"devui-seconds\" [ngModel]=\"currentSecond\" (keydown)=\"fixTime($event, 's')\" [disabled]=\"isDisabledTime()\" />\n <div class=\"devui-btn-nav\" *ngIf=\"!isDisabledTime()\">\n <div class=\"btn-up\" (click)=\"timeUp('s')\"></div>\n <div class=\"btn-down\" (click)=\"timeDown('s')\"></div>\n </div>\n </div>\n </div>\n </td>\n <td colspan=\"3\">\n <div class=\"devui-btn-wrapper\" *ngIf=\"showTime\">\n <d-button bsStyle=\"common\" [disabled]=\"disabled\" (btnClick)=\"confirmTime($event)\" bsSize=\"sm\"\n >{{ i18nCommonText?.btnConfirm }}\n </d-button>\n </div>\n <div class=\"devui-btn-wrapper\" *ngIf=\"!showTime\">\n <d-button bsStyle=\"common\" [disabled]=\"isTodayDisable() || disabled\" (btnClick)=\"chooseToday()\" bsSize=\"sm\"\n >{{ i18nText?.today }}\n </d-button>\n </div>\n </td>\n </tr>\n <tr class=\"time-picker-view devui-custom-area\" *ngIf=\"customViewTemplate\">\n <td colspan=\"7\">\n <ng-template\n [ngTemplateOutlet]=\"customViewTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this, chooseDate: chooseDate, clearAll: clearAll }\"\n ></ng-template>\n </td>\n </tr>\n </tfoot>\n </table>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-date-header{height:38px}.devui-month-view{background-color:var(--devui-connected-overlay-bg, #ffffff);font-size:var(--devui-font-size, 12px);width:240px;text-align:center;box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 12px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius, 2px);position:relative}.devui-month-view .devui-month-view-table{margin-bottom:0;background:var(--devui-connected-overlay-bg, #ffffff);table-layout:fixed;border-collapse:collapse;width:100%}.devui-month-view .devui-date-title{font-weight:700;cursor:pointer;font-size:var(--devui-font-size, 12px)}.devui-month-view .devui-date-title:hover{color:var(--devui-brand-hover, #3979f9)}.devui-month-view .devui-btn-link{text-decoration:none;cursor:pointer;display:block}.devui-month-view .devui-btn-link.devui-year-month-disabled{cursor:not-allowed}.devui-month-view .devui-btn-link.devui-year-month-disabled svg path,.devui-month-view .devui-btn-link.devui-year-month-disabled svg polygon{fill:var(--devui-disabled-text, #c2c2c2)}.devui-month-view .devui-btn-link svg path,.devui-month-view .devui-btn-link svg polygon{fill:var(--devui-text-weak, #333333)}.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover svg path,.devui-month-view .devui-btn-link:not(.devui-year-month-disabled):hover svg polygon{fill:var(--devui-icon-fill-active-hover, #000000)}.devui-month-view .date-select{border:none;background:transparent;outline:none;-moz-appearance:none;-webkit-appearance:none;appearance:none}.devui-month-view .devui-week-header{cursor:default;margin-bottom:16px}.devui-month-view .devui-week-header td{width:32px;height:24px;line-height:24px;color:var(--devui-text, #191919);border:none}.devui-month-view .devui-day:not(.disabled){cursor:pointer;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #f0f0f0)}.devui-month-view .devui-day.disabled{cursor:not-allowed}.devui-calendar-date{display:block;margin:0 3px;width:20px;height:20px;padding:0;line-height:20px;background:transparent;text-align:center;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #191919)}.devui-month-view .devui-out-of-month .devui-calendar-date{opacity:.8;background-color:var(--devui-connected-overlay-bg, #ffffff);color:var(--devui-line, #dbdbdb)}.devui-month-view .devui-out-of-month:not(.disabled):hover .devui-calendar-date{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-month-view .devui-minutes:before{content:\":\";text-align:center;position:absolute;margin-left:-13px}.devui-month-view .devui-seconds:before{content:\":\";text-align:center;position:absolute;margin-left:-13px}.devui-yearOption,.devui-monthOption{width:240px;height:195px;position:absolute;left:-68px;top:30px;background:var(--devui-base-bg, #ffffff);z-index:1}.devui-yearOption li,.devui-monthOption li{width:60px;height:68px;line-height:68px;text-align:center;display:inline-block;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-yearOption li:hover,.devui-monthOption li:hover{background:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000);cursor:pointer}.devui-yearOption li.active:not(.disabled),.devui-monthOption li.active:not(.disabled){color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)}.devui-yearOption li.active:not(.disabled):hover,.devui-monthOption li.active:not(.disabled):hover{background-color:var(--devui-list-item-active-hover-bg, #cedefd)}.devui-yearOption li.disabled,.devui-monthOption li.disabled{color:var(--devui-disabled-text, #c2c2c2);background-color:var(--devui-disabled-bg, #f3f3f3);cursor:not-allowed}.devui-month-view .devui-timepicker{background:var(--devui-area, #f3f3f3);display:flex;justify-content:space-evenly}.devui-month-view .devui-timepicker input{outline:0;border:0;background:var(--devui-area, #f3f3f3);color:var(--devui-text, #191919);width:30px;padding:0 0 0 3px;height:30px;text-align:center}.devui-month-view .devui-timepicker.devui-timepicker-disabled{background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-month-view .devui-timepicker.devui-timepicker-disabled input{cursor:not-allowed;color:var(--devui-disabled-text, #c2c2c2);background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-month-view .devui-timepicker .devui-time{position:relative;display:inline-block;width:40px}.devui-month-view .devui-timepicker .devui-time:not(:first-child):before{content:\":\"}.devui-month-view .devui-table>tbody>tr>td{vertical-align:middle;padding:4px;border-top:none;border-radius:var(--devui-border-radius, 2px)}.devui-month-view .devui-table>tbody>tr>td.devui-day-start{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-month-view .devui-table>tbody>tr>td.devui-day-end{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-month-view .devui-table>tbody>tr>td:not(.disabled){border-top:none;background:var(--devui-connected-overlay-bg, #ffffff)}.devui-month-view .devui-table>tbody>tr>td.devui-day:hover:not(.active):not(.disabled):not(.devui-out-of-month){background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-month-view .devui-table>tbody>tr>td.devui-day:not(.disabled).active:hover{background-color:var(--devui-list-item-active-hover-bg, #cedefd)}.devui-month-view .devui-table>tbody>tr>td.devui-day:not(.disabled).active:hover>.devui-calendar-date{color:var(--devui-light-text, #ffffff)}.devui-month-view .devui-table>tbody>tr>td.devui-day:not(.disabled):not(.active):not(.devui-out-of-month):not(:hover).devui-today .devui-calendar-date{color:var(--devui-brand, #0a59f7);font-weight:700}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.disabled{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.disabled .devui-calendar-date{color:var(--devui-disabled-text, #c2c2c2)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.disabled:not(.active){background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.disabled.active{background-color:var(--devui-disabled-line, #e6e6e6)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day:not(.disabled).active{background:var(--devui-list-item-active-bg, #cedefd)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day:not(.disabled).active>.devui-calendar-date{color:var(--devui-light-text, #ffffff)}.devui-month-view .devui-table>thead>tr>td{vertical-align:middle;line-height:1.5;padding:4px}.devui-noSelect{-webkit-user-select:none;user-select:none}.devui-month-view .devui-month-view-table td{border-bottom:none}.devui-month-view .devui-table tfoot,.devui-custom-area{border-top:1px solid var(--devui-area, #f3f3f3)}.devui-month-view tfoot td{padding:10px;vertical-align:middle;border-top:none}.devui-dropdown-menu{font-size:var(--devui-font-size, 12px)}.devui-btn-wrapper{margin-top:0}.devui-btn-nav{display:none;position:absolute;right:9px;top:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.devui-btn-nav .btn-up,.devui-btn-nav .btn-down{position:absolute;width:0;height:0;border:6px solid}.devui-btn-nav .btn-up{padding-top:2px;padding-bottom:1px;border-color:transparent transparent var(--devui-text, #191919) transparent}.devui-btn-nav .btn-up:hover{border-color:transparent transparent var(--devui-icon-fill-active, #191919) transparent}.devui-btn-nav .btn-down{top:16px;padding-bottom:4px;border-color:var(--devui-text, #191919) transparent transparent transparent}.devui-btn-nav .btn-down:hover{border-color:var(--devui-icon-fill-active, #191919) transparent transparent transparent}.devui-time input[type=number]::-webkit-inner-spin-button,.devui-time input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.devui-time input[type=number]{-moz-appearance:textfield}.devui-time:hover .devui-btn-nav{display:block}:host ::ng-deep .cdk-overlay-pane d-datepicker.devui-dropdown-menu{padding:0}:host .devui-form-control{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ButtonComponent, selector: "d-button", inputs: ["id", "type", "bsStyle", "shape", "bsSize", "bsPosition", "bordered", "icon", "disabled", "showLoading", "width", "autofocus", "loadingTemplateRef"], outputs: ["btnClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
type: Component,
args: [{ selector: 'd-datepicker', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatepickerComponent),
multi: true,
},
], preserveWhitespaces: false, template: "<div class=\"devui-month-view {{ cssClass }}\">\n <table class=\"devui-table devui-month-view-table\">\n <thead class=\"devui-noSelect\">\n <tr class=\"devui-date-header\">\n <td>\n <a\n class=\"devui-btn-link\"\n aria-hidden=\"true\"\n (click)=\"onPreYearOption()\"\n [ngClass]=\"{\n 'devui-year-month-disabled': !hasPreYearOption()\n }\"\n >\n <svg\n width=\"10px\"\n height=\"10px\"\n viewBox=\"0 0 10 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1.000000, -1.000000)\">\n <path\n d=\"M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </a>\n </td>\n <td>\n <a\n *ngIf=\"!openChooseYear && !openChooseMonth\"\n class=\"devui-btn-link devui-btn-left\"\n aria-hidden=\"true\"\n (click)=\"onPreMonth()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasPreMonth() }\"\n >\n <svg\n width=\"6px\"\n height=\"10px\"\n viewBox=\"0 0 6 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-3.000000, -1.000000)\">\n <polygon\n transform=\"translate(6.000000, 6.000000) rotate(-90.000000) translate(-6.000000, -6.000000) \"\n points=\"6 3 10.1666667 9 1.83333333 9\"\n ></polygon>\n </g>\n </g>\n </svg>\n </a>\n </td>\n <td colspan=\"3\" class=\"devui-dropdown\">\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'month')\" *ngIf=\"mode !== 'year' && i18nLocale === 'en-us'\">{{\n (i18nText?.monthsOfYear)[currentMonthIndex]\n }}</span>\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'year')\"> {{ i18nText?.yearDisplay(currentYear) }} </span>\n <span class=\"devui-date-title\" (click)=\"toggle($event, 'month')\" *ngIf=\"mode !== 'year' && i18nLocale === 'zh-cn'\">{{\n (i18nText?.monthsOfYear)[currentMonthIndex]\n }}</span>\n <ul class=\"devui-monthOption text-center\" [style.display]=\"openChooseMonth ? 'block' : 'none'\">\n <li\n *ngFor=\"let month of availableMonths\"\n