ng-devui
Version:
DevUI components based on Angular
640 lines • 148 kB
JavaScript
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, Output, Renderer2, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { I18nService } from 'ng-devui/i18n';
import { DatePickerConfigService as DatePickerConfig } from './date-picker.config.service';
import { SelectDateRangeChangeReason } from './date-range-change-event-args.model';
import { DatepickerComponent as SingleDatepickerComponent } from './datepicker.component';
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 SingleDateRangePickerComponent extends SingleDatepickerComponent {
constructor(elementRef, renderer, datePickerConfig, changeDetectorRef, i18n) {
super(elementRef, renderer, datePickerConfig, changeDetectorRef, i18n);
this.elementRef = elementRef;
this.renderer = renderer;
this.datePickerConfig = datePickerConfig;
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.selectedRange = Array(2);
this.rangePicker = false;
this.isAuxiliary = false;
this.currentCalendars = Array(2);
this.hoverOnDate = new EventEmitter();
this.rangeSelected = new EventEmitter();
this.rangeSelecting = new EventEmitter();
this.syncPickerPair = new EventEmitter();
this.consolidateTime = new EventEmitter();
this.setI18nText();
}
ngOnInit() {
[this.rangeStart, this.rangeEnd] = this.selectedRange;
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);
if (!this.isAuxiliary && !this.rangeStart) {
// 主面板，未选择开始日期的情况
this.onSelectDateChanged();
this.onDisplayWeeksChange();
this.onYearRangeChange();
this.initDatePicker();
}
else if (this.isAuxiliary && !this.rangeEnd) {
// 副面板，未选择结束日期的情况
this.onSelectDateChanged();
this.initDatePicker();
this.onYearRangeChange();
this.onNextMonth('init');
this.selectedDate = new Date(this.currentYear, this.currentMonthIndex);
}
else if (!this.isAuxiliary && this.rangeStart) {
// 主面板，已选择开始日期的情况
this.selectedDate = this.rangeStart;
super.ngOnInit();
}
else if (this.isAuxiliary && this.rangeEnd) {
// 副面板，已选择结束日期的情况
const rangeStart = this.convertDate(this.rangeStart);
const rangeEnd = this.convertDate(this.rangeEnd);
this.currentYear = rangeEnd.getFullYear();
this.currentMonthIndex = rangeEnd.getMonth();
this.selectedDate = new Date(this.currentYear, this.currentMonthIndex);
super.ngOnInit();
// 处理选择的日期范围开始和结束在同一个月的情况
if (rangeStart && rangeEnd && rangeStart.getFullYear() === rangeEnd.getFullYear() && rangeStart.getMonth() === rangeEnd.getMonth()) {
this.onNextMonth('init');
}
this.selectedDate = new Date(this.currentYear, this.currentMonthIndex);
}
this.availableMonths = this.onDisplayMonthsChange();
this.notifyCalenderChange();
}
/*
** @param invocation:调用时机
*/
onSelectDate($event, date, invocation) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if (invocation !== 'init') {
if (this.isDisabledDay(date)) {
$event.preventDefault();
return;
}
const curDate = this.showTime && date ? this.setTime(date) : date;
this.selectRange(curDate);
this.selectedDate = this.isAuxiliary ? this.rangeEnd : this.rangeStart;
}
}
emitHoverDate($event, date) {
if (this.selectingRange && date.getTime() <= this.maxDate.getTime() && date.getTime() >= this.minDate.getTime()) {
this.hoverOnDate.emit(date);
}
}
selectStart(date) {
this.rangeStart = new Date(this.convertDate(date).setHours(0, 0, 0));
}
selectEnd(date) {
this.selectingRange = false;
this.rangeEnd = new Date(this.convertDate(date).setHours(23, 59, 59));
if (!!this.rangeStart && !!this.rangeEnd) {
this.rangeChange(this.ensureRangeValueOrder([this.rangeStart, this.rangeEnd], true), SelectDateRangeChangeReason.date);
}
}
convertDate(date) {
return date ? this.dateConverter.parse(date) : null;
}
selectRange(date, passive = false) {
if (this.disabled) {
return;
}
if (!this.rangeStart || (!!this.rangeStart && !!this.rangeEnd)) {
this.rangeEnd = null;
this.rangeStart = null;
this.selectStart(date);
this.selectingRange = true;
if (!passive) {
this.rangeSelecting.emit(this.rangeStart);
}
}
else {
this.selectEnd(date);
}
}
rangeChange(range, reason) {
this.selectedRange = range;
this.notifyValueChange(range, reason);
}
writeValue(selectedRange) {
this.selectedRange = selectedRange;
}
notifyValueChange(selectedRange, reason) {
const currentReason = typeof reason === 'number' ? reason : SelectDateRangeChangeReason.time;
this.onChange(selectedRange);
this.rangeSelected.emit({
reason: currentReason,
selectedRange: selectedRange,
});
}
isSelectDay(date) {
let rangeSource = this.selectedRange;
if (this.selectingRange) {
rangeSource = [this.rangeStart, this.previewEnd];
}
if (!Array.isArray(rangeSource)) {
return;
}
return rangeSource.some((selectedDate) => {
if (!selectedDate || !date) {
return false;
}
return (date.getFullYear() === selectedDate.getFullYear() &&
date.getMonth() === selectedDate.getMonth() &&
date.getDate() === selectedDate.getDate());
});
}
isBetweenDay(date) {
if (Array.isArray(this.selectedRange) && this.selectedRange.every((day) => !!day)) {
const index = this.selectedRange.findIndex((day) => {
return date.getFullYear() === day.getFullYear() && date.getMonth() === day.getMonth() && date.getDate() === day.getDate();
});
return ['devui-day-start', 'devui-day-end'][index];
}
else {
return;
}
}
isDisabledTime() {
const selectedSide = this.isAuxiliary ? this.rangeEnd : this.rangeStart;
return selectedSide ? super.isDisabledDay(selectedSide) : true;
}
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.timeChange();
}
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.timeChange();
}
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;
// 防抖，防止提前校验导致错误的校验
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.timeChange();
}, 300);
}
}
}
timeChange() {
if (!this.isAuxiliary) {
this.rangeStart = new Date(this.rangeStart.getFullYear(), this.rangeStart.getMonth(), this.rangeStart.getDate(), Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond));
}
else {
this.rangeEnd = new Date(this.rangeEnd.getFullYear(), this.rangeEnd.getMonth(), this.rangeEnd.getDate(), Number(this.currentHour), Number(this.currentMinute), Number(this.currentSecond));
}
this.rangeChange(this.ensureRangeValueOrder([this.rangeStart, this.rangeEnd]));
}
isSameDate(date1, date2) {
return date1?.getFullYear() === date2?.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
}
ngOnChanges(changes) {
if (Object.prototype.hasOwnProperty.call(changes, 'selectedRange')) {
this.selectingRange = false;
[this.rangeStart, this.rangeEnd] = changes.selectedRange.currentValue;
}
}
isInRange(dateParam) {
let date = dateParam;
const rangeStart = this.rangeStart;
let rangeEnd = this.rangeEnd;
if (this.selectingRange) {
rangeEnd = this.previewEnd;
}
date = new Date(date).getTime();
return (date < Math.max(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()) &&
date > Math.min(new Date(rangeStart).getTime(), new Date(rangeEnd).getTime()));
}
ensureRangeValueOrder(dateRange, initTime = false) {
if (Array.isArray(dateRange) && dateRange.length === 2) {
// 当选择同一天时，判断时间是否顺序错误并修正
if (this.isSameDate(dateRange[0], dateRange[1]) && dateRange[0].getTime() - dateRange[1].getTime() > 0) {
this.fixReverseTime(dateRange);
}
// 当后一次时间选择比前一次日期靠前时，对时间置换
if (initTime && dateRange[0].getTime() - dateRange[1].getTime() > 0) {
dateRange[0] = new Date(dateRange[0].setHours(23, 59, 59));
dateRange[1] = new Date(dateRange[1].setHours(0, 0, 0));
}
if (dateRange.every((day) => !!day)) {
dateRange.sort((a, b) => {
return new Date(a).getTime() - new Date(b).getTime();
});
}
else {
if (!dateRange[0]) {
dateRange[0] = dateRange[1];
dateRange[1] = null;
}
}
}
return dateRange;
}
fixReverseTime(dateRange) {
if (this.isAuxiliary) {
dateRange[1] = dateRange[0];
this.currentHour = dateRange[1].getHours();
this.currentMinute = dateRange[1].getMinutes();
this.currentSecond = dateRange[1].getSeconds();
}
else {
dateRange[0] = dateRange[1];
this.currentHour = dateRange[0].getHours();
this.currentMinute = dateRange[0].getMinutes();
this.currentSecond = dateRange[0].getSeconds();
}
}
onNextMonth(invocation) {
if (this.hasNextMonth() || invocation === 'init') {
let maxDateInRange;
if (invocation === 'init') {
maxDateInRange = this.selectedRange.reduce((start, end) => (new Date(end) > new Date(start) ? end : start));
}
super.onNextMonth(maxDateInRange, 'init');
this.notifyCalenderChange();
}
}
hasNextMonth() {
let hasNextMonth = true;
// 副面板只用考虑maxDate的影响
// 主面板同时考虑maxDate和日历的影响
// minDate的影响在super.hasNextMonth()中有计算
if (!this.isAuxiliary && this.currentCalendars[0] && this.currentCalendars[1]) {
hasNextMonth = this.isBeforeMoreThanOneMonth(this.currentCalendars[0], this.currentCalendars[1]);
}
return hasNextMonth && super.hasNextMonth();
}
onPreMonth() {
if (this.hasPreMonth()) {
super.onPreMonth();
this.notifyCalenderChange();
}
}
hasPreMonth() {
let hasPrevMonth = true;
// 主面板只用考虑minDate的影响
// 副面板同时考虑minDate和日历的影响
// minDate的影响在super.hasPreMonth()中有计算
if (this.isAuxiliary && this.currentCalendars[0] && this.currentCalendars[1]) {
hasPrevMonth = this.isAfterMoreThanOneMonth(this.currentCalendars[1], this.currentCalendars[0]);
}
return hasPrevMonth && super.hasPreMonth();
}
hasPreYearOption() {
let hasPrevYear = true;
if (this.openChooseYear) {
if (!this.isAuxiliary) {
hasPrevYear = this.nowMinYear > this.minDate.getFullYear();
}
else {
hasPrevYear =
this.nowMinYear > this.minDate.getFullYear() &&
this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: this.nowMinYear, month: this.currentCalendars[1].month });
}
}
else if (this.currentCalendars[0] && this.currentCalendars[1]) {
// 主面板只用考虑minDate的影响
if (!this.isAuxiliary) {
hasPrevYear = this.currentCalendars[0].year > this.minDate.getFullYear();
}
else {
// 副面板同时考虑minDate和日历的影响
hasPrevYear =
this.currentCalendars[1].year > this.minDate.getFullYear() &&
this.isBeforeMoreThanOneYear(this.currentCalendars[0], this.currentCalendars[1]);
}
}
return hasPrevYear;
}
hasNextYearOption() {
let hasNextYear = true;
if (this.openChooseYear) {
if (this.isAuxiliary) {
hasNextYear = this.nowMaxYear < this.maxDate.getFullYear();
}
else {
hasNextYear =
this.nowMaxYear < this.maxDate.getFullYear() &&
this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: this.nowMaxYear, month: this.currentCalendars[0].month });
}
}
else if (this.currentCalendars[0] && this.currentCalendars[1]) {
// 副面板只用考虑maxDate的影响
if (this.isAuxiliary) {
hasNextYear = this.currentCalendars[1].year < this.maxDate.getFullYear();
}
else {
// 主面板同时考虑maxDate和日历的影响
hasNextYear =
this.currentCalendars[0].year < this.maxDate.getFullYear() &&
this.isAfterMoreThanOneYear(this.currentCalendars[1], this.currentCalendars[0]);
}
}
return hasNextYear;
}
isYearDisable(year) {
if (this.isAuxiliary) {
// 先判定主面板是否比附面板小一年以上，是的话disabled为false;
return !(this.isBeforeMoreThanOneYear(this.currentCalendars[0], { year: year + 1, month: this.currentCalendars[1].month }) ||
// 主附面板在同一年时，判断主附面板月是否在临界值；
(this.currentCalendars[0].year === year && this.currentCalendars[0].month !== 11));
}
else {
return !(this.isAfterMoreThanOneYear(this.currentCalendars[1], { year: year - 1, month: this.currentCalendars[0].month }) ||
(this.currentCalendars[1].year === year && this.currentCalendars[1].month !== 0));
}
}
isMonthDisable(month) {
if (this.isAuxiliary) {
return !this.isBeforeMoreThanOneMonth(this.currentCalendars[0], {
year: this.currentCalendars[1].year,
month: parseInt(month, 10) - 1 + 1,
});
}
else {
return !this.isAfterMoreThanOneMonth(this.currentCalendars[1], {
year: this.currentCalendars[0].year,
month: parseInt(month, 10) - 1 - 1,
});
}
}
onPreYear() {
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);
}
this.notifyCalenderChange();
}
onNextYear() {
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);
}
this.notifyCalenderChange();
}
onSelectMonth(month) {
if (month.disabled || this.isMonthDisable(month.title)) {
return;
}
this.currentMonthIndex = month.index;
this.onDisplayWeeksChange();
this.openChooseMonth = false;
this.isAuxiliary
? (this.currentCalendars[1].month = this.currentMonthIndex)
: (this.currentCalendars[0].month = this.currentMonthIndex);
}
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 || this.isYearDisable(year.title)) {
return;
}
this.currentYear = yearTitle;
this.onDisplayWeeksChange();
this.availableMonths = this.onDisplayMonthsChange();
this.openChooseYear = false;
if (!$event) {
this.isAuxiliary ? (this.currentCalendars[1].year = this.currentYear) : (this.currentCalendars[0].year = this.currentYear);
return;
}
this.openChooseMonth = true;
if (this.isAuxiliary) {
this.currentCalendars[1].year = this.currentYear;
this.currentCalendars[1].month = 11;
this.currentMonthIndex = 11;
}
else {
this.currentCalendars[0].year = this.currentYear;
this.currentCalendars[0].month = 0;
this.currentMonthIndex = 0;
}
}
isBeforeMoreThanOneMonth(dateA, dateB) {
if (dateA.year > dateB.year) {
return false;
}
if (dateA.year === dateB.year && dateB.month <= dateA.month + 1) {
return false;
}
// 处理A日期为B日期前一年12月同时B日期为1月的特殊情况
return !(dateB.year - dateA.year === 1 && dateA.month === 11 && dateB.month === 0);
}
isAfterMoreThanOneMonth(dateA, dateB) {
if (dateA.year < dateB.year) {
return false;
}
if (dateA.year === dateB.year && dateB.month + 1 >= dateA.month) {
return false;
}
// 处理A日期为B日期后一年1月同时B日期为12月的特殊情况
return !(dateA.year - dateB.year === 1 && dateA.month === 0 && dateB.month === 11);
}
isBeforeMoreThanOneYear(dateA, dateB) {
if (dateA.year >= dateB.year) {
return false;
}
// 处理B日期比A日期大1年同时A日期月份大于B日期月份的情况
return !(dateB.year - dateA.year === 1 && dateA.month >= dateB.month);
}
isAfterMoreThanOneYear(dateA, dateB) {
if (dateA.year <= dateB.year) {
return false;
}
// 处理A日期比B日期大1年同时A日期月份小于B日期月份的情况
return !(dateA.year - dateB.year === 1 && dateA.month <= dateB.month);
}
notifyCalenderChange() {
this.syncPickerPair.emit({
year: this.currentYear,
month: this.currentMonthIndex,
});
}
confirmTime() {
this.consolidateTime.emit();
}
setTime(date) {
return new Date(date.setHours(this.currentHour, this.currentMinute, this.currentSecond));
}
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.selectedDate = this.selectedDate || date;
this.currentYear = date.getFullYear();
this.currentMonthIndex = date.getMonth();
if (!this.showTime) {
return;
}
switch (this.isAuxiliary) {
case false:
// Left panel
this.currentHour = this.rangeStart ? this.rangeStart.getHours() : 0;
this.currentMinute = this.rangeStart ? this.rangeStart.getMinutes() : 0;
this.currentSecond = this.rangeStart ? this.rangeStart.getSeconds() : 0;
break;
case true:
// Right panel
this.currentHour = this.rangeEnd ? this.rangeEnd.getHours() : 23;
this.currentMinute = this.rangeEnd ? this.rangeEnd.getMinutes() : 59;
this.currentSecond = this.rangeEnd ? this.rangeEnd.getSeconds() : 59;
break;
default:
}
}
get currentTime() {
return {
hour: this.currentHour,
minute: this.currentMinute,
second: this.currentSecond,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SingleDateRangePickerComponent, 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: SingleDateRangePickerComponent, selector: "d-datepicker-range-single", inputs: { selectedRange: "selectedRange", rangePicker: "rangePicker", isAuxiliary: "isAuxiliary", currentCalendars: "currentCalendars" }, outputs: { hoverOnDate: "hoverOnDate", rangeSelected: "rangeSelected", rangeSelecting: "rangeSelecting", syncPickerPair: "syncPickerPair", consolidateTime: "consolidateTime" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SingleDateRangePickerComponent),
multi: true,
},
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-month-view {{ cssClass }}\">\n <table class=\"devui-table devui-month-view-table\">\n <thead>\n <tr class=\"devui-calender-header\">\n <td>\n <a\n class=\"devui-btn-link\"\n aria-hidden=\"true\"\n (click)=\"onPreYear()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasPreYearOption() }\"\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\" *ngIf=\"i18nLocale === 'en-us'\" (click)=\"toggle($event, 'month')\">{{\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\" *ngIf=\"i18nLocale === 'zh-cn'\" (click)=\"toggle($event, 'month')\">{{\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 || isMonthDisable(month.title) }\"\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 || isYearDisable(item.title) }\"\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)=\"onNextYear()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasNextYearOption() }\"\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>\n <tr *ngFor=\"let week of displayWeeks\">\n <td\n *ngFor=\"let day of week\"\n class=\"devui-day {{ isBetweenDay(day.date) }}\"\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-in-range': isInRange(day.date),\n 'devui-today': day.isToday\n }\"\n (click)=\"onSelectDate($event, day.date)\"\n (mouseover)=\"emitHoverDate($event, day.date)\"\n >\n <div class=\"devui-calendar-date\">{{ day.day }}</div>\n </td>\n </tr>\n </tbody>\n <tfoot>\n <tr class=\"time-picker-view\" *ngIf=\"showTime\">\n <ng-container *ngIf=\"!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\" *ngIf=\"isAuxiliary\">\n <div class=\"devui-btn-wrapper\">\n <d-button bsStyle=\"common\" [disabled]=\"!rangeStart || !rangeEnd || disabled\" (btnClick)=\"confirmTime()\" bsSize=\"sm\">\n {{ i18nCommonText?.btnConfirm }}\n </d-button>\n </div>\n </td>\n </ng-container>\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}.devui-month-view{box-shadow:none}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.devui-in-range:not(.active):not(.disabled){background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-text, #191919);border-radius:0}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.devui-in-range:not(.active):not(.disabled):hover{background-color:var(--devui-range-item-hover-bg, #cedefd)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.devui-in-range.disabled:not(.active){background-color:var(--devui-dividing-line, #f0f0f0);opacity:.8;color:var(--devui-text, #191919)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.active.disabled{background-color:var(--devui-dividing-line, #f0f0f0)}.devui-month-view .devui-table>tbody>tr>td.devui-in-month-day.active.disabled .devui-calendar-date{opacity:.8}.devui-month-view .devui-in-month-day.devui-in-range.disabled:not(.active) .devui-calendar-date{color:var(--devui-text, #191919);cursor:not-allowed}.devui-month-view .devui-day.devui-out-of-month.active:hover .devui-calendar-date{background-color:transparent;color:var(--devui-icon-text, #808080)}.devui-month-view .devui-day.devui-out-of-month.active.disabled{background-color:transparent}tr.devui-calender-header{height:38px;-webkit-user-select:none;user-select:none}.devui-month-view .devui-btn-link.devui-btn-right{transform:scale(1);display:inline-block;line-height:1}.devui-monthOption,.devui-yearOption{white-space:normal}\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: 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: SingleDateRangePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'd-datepicker-range-single', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SingleDateRangePickerComponent),
multi: true,
},
], preserveWhitespaces: false, template: "<div class=\"devui-month-view {{ cssClass }}\">\n <table class=\"devui-table devui-month-view-table\">\n <thead>\n <tr class=\"devui-calender-header\">\n <td>\n <a\n class=\"devui-btn-link\"\n aria-hidden=\"true\"\n (click)=\"onPreYear()\"\n [ngClass]=\"{ 'devui-year-month-disabled': !hasPreYearOption() }\"\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\" *ngIf=\"i18nLocale === 'en-us'\" (click)=\"toggle($event, 'month')\">{{\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\" *ngIf=\"i18nLocale === 'zh-cn'\" (click)=\"toggle($event, 'month')\">{{\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 || isMonthDisable(month.title) }\"\n (click)=\"onSelectMonth(month)\"\n >\n {{ month.title }}\n </li>\n </ul>\n <ul class=\"devui-yearOption text-center\" [style.display]=\"openChooseYea