datex-ui 1.0.7 → 1.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/constants/locales.d.ts +4 -7
- package/dist/constants/themes.d.ts +5 -6
- package/dist/datex.d.ts +77 -115
- package/dist/index.d.ts +9 -4
- package/dist/index.esm.js +1034 -700
- package/dist/services/calendar-service.d.ts +21 -0
- package/dist/services/event-service.d.ts +17 -0
- package/dist/services/keyboard-service.d.ts +51 -0
- package/dist/services/position-service.d.ts +18 -0
- package/dist/services/theme-service.d.ts +18 -0
- package/dist/services/validation-service.d.ts +32 -0
- package/dist/types/{index.d.ts → datex-types.d.ts} +21 -7
- package/dist/utils/date-utils.d.ts +16 -0
- package/package.json +68 -68
- package/dist/style.css +0 -1
- package/dist/tests/setup.d.ts +0 -1
- package/dist/utils/dateHelpers.d.ts +0 -24
- package/dist/utils/domHelpers.d.ts +0 -30
package/README.md
CHANGED
|
@@ -9,10 +9,10 @@ A modern, lightweight, and customizable date range picker for TypeScript/JavaScr
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
11
|
- 📅 **Date Range Selection** - Select start and end dates with intuitive interface
|
|
12
|
-
-
|
|
12
|
+
- 📆 **Single Date Mode** - Use as a single date picker
|
|
13
13
|
- ⏰ **Time Picker** - Optional time selection with 12/24 hour formats
|
|
14
14
|
- 🎨 **Customizable Themes** - Built-in themes (Default, Bootstrap, Material) or create your own
|
|
15
|
-
-
|
|
15
|
+
- 🌍 **Internationalization** - Built-in Spanish locale with easy customization
|
|
16
16
|
- 📱 **Responsive Design** - Works on desktop and mobile devices
|
|
17
17
|
- 🚀 **Zero Dependencies** - Pure JavaScript/TypeScript implementation
|
|
18
18
|
- 🎛️ **Predefined Ranges** - Quick selection with common date ranges
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Predefined locales for
|
|
2
|
+
* Predefined locales for Datex date picker
|
|
3
3
|
*/
|
|
4
|
-
import
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const SPANISH_LOCALE_WITH_TIME: DateRangePickerLocale;
|
|
8
|
-
export declare const FRENCH_LOCALE: DateRangePickerLocale;
|
|
9
|
-
export declare const GERMAN_LOCALE: DateRangePickerLocale;
|
|
4
|
+
import { DatexLocale } from "../types/datex-types";
|
|
5
|
+
export declare const SPANISH_LOCALE: DatexLocale;
|
|
6
|
+
export declare const SPANISH_LOCALE_WITH_TIME: DatexLocale;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Predefined themes for
|
|
2
|
+
* Predefined themes for Datex date picker
|
|
3
3
|
*/
|
|
4
|
-
import
|
|
5
|
-
export declare const DEFAULT_THEME:
|
|
6
|
-
export declare const BOOTSTRAP_THEME:
|
|
7
|
-
export declare const MATERIAL_THEME:
|
|
8
|
-
export declare const DARK_THEME: DateRangePickerTheme;
|
|
4
|
+
import { DatexTheme } from "../types/datex-types";
|
|
5
|
+
export declare const DEFAULT_THEME: DatexTheme;
|
|
6
|
+
export declare const BOOTSTRAP_THEME: DatexTheme;
|
|
7
|
+
export declare const MATERIAL_THEME: DatexTheme;
|
package/dist/datex.d.ts
CHANGED
|
@@ -1,136 +1,98 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
todayColor?: string;
|
|
11
|
-
disabledColor?: string;
|
|
12
|
-
applyButtonColor?: string;
|
|
13
|
-
cancelButtonColor?: string;
|
|
14
|
-
borderRadius?: string;
|
|
15
|
-
fontSize?: string;
|
|
16
|
-
fontFamily?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare const DEFAULT_THEME: DatexTheme;
|
|
19
|
-
export declare const BOOTSTRAP_THEME: DatexTheme;
|
|
20
|
-
export declare const MATERIAL_THEME: DatexTheme;
|
|
21
|
-
export interface DatexOptions {
|
|
22
|
-
startDate?: Date;
|
|
23
|
-
endDate?: Date;
|
|
24
|
-
minDate?: Date | null;
|
|
25
|
-
maxDate?: Date | null;
|
|
26
|
-
minYear?: number;
|
|
27
|
-
maxYear?: number;
|
|
28
|
-
maxSpan?: {
|
|
29
|
-
days?: number;
|
|
30
|
-
} | null;
|
|
31
|
-
autoApply?: boolean;
|
|
32
|
-
singleDatePicker?: boolean;
|
|
33
|
-
showDropdowns?: boolean;
|
|
34
|
-
linkedCalendars?: boolean;
|
|
35
|
-
autoUpdateInput?: boolean;
|
|
36
|
-
alwaysShowCalendars?: boolean;
|
|
37
|
-
showCustomRangeLabel?: boolean;
|
|
38
|
-
timePicker?: boolean;
|
|
39
|
-
timePicker24Hour?: boolean;
|
|
40
|
-
timePickerIncrement?: number;
|
|
41
|
-
timePickerSeconds?: boolean;
|
|
42
|
-
ranges?: Record<string, [Date, Date]>;
|
|
43
|
-
opens?: "left" | "right" | "center";
|
|
44
|
-
drops?: "up" | "down" | "auto";
|
|
45
|
-
locale?: DatexLocale;
|
|
46
|
-
buttonClasses?: string;
|
|
47
|
-
applyButtonClasses?: string;
|
|
48
|
-
cancelButtonClasses?: string;
|
|
49
|
-
theme?: DatexTheme;
|
|
50
|
-
}
|
|
51
|
-
export interface DatexLocale {
|
|
52
|
-
format: string;
|
|
53
|
-
separator: string;
|
|
54
|
-
applyLabel: string;
|
|
55
|
-
cancelLabel: string;
|
|
56
|
-
customRangeLabel: string;
|
|
57
|
-
daysOfWeek: string[];
|
|
58
|
-
monthNames: string[];
|
|
59
|
-
firstDay: number;
|
|
60
|
-
}
|
|
61
|
-
export declare const SPANISH_LOCALE: DatexLocale;
|
|
62
|
-
export declare const SPANISH_LOCALE_WITH_TIME: DatexLocale;
|
|
63
|
-
export type DatexCallback = (startDate: Date, endDate: Date, label?: string) => void;
|
|
1
|
+
/**
|
|
2
|
+
* Datex - Modern Date Range Picker
|
|
3
|
+
* Refactored for better maintainability and clean code principles
|
|
4
|
+
*/
|
|
5
|
+
import { ValidationResult, DatexValidation } from "./services/validation-service";
|
|
6
|
+
import { DatexOptions, DatexCallback, DatexTheme } from "./types/datex-types";
|
|
7
|
+
export * from "./types/datex-types";
|
|
8
|
+
export * from "./constants/themes";
|
|
9
|
+
export * from "./constants/locales";
|
|
64
10
|
export declare class Datex {
|
|
65
11
|
private element;
|
|
66
12
|
private container;
|
|
67
13
|
private options;
|
|
68
14
|
private locale;
|
|
69
|
-
private theme;
|
|
70
15
|
private callback;
|
|
71
16
|
private state;
|
|
72
|
-
private
|
|
73
|
-
private
|
|
74
|
-
private
|
|
75
|
-
private
|
|
76
|
-
private
|
|
17
|
+
private themeService;
|
|
18
|
+
private eventService;
|
|
19
|
+
private positionService;
|
|
20
|
+
private calendarService;
|
|
21
|
+
private validationService;
|
|
22
|
+
private keyboardService;
|
|
77
23
|
constructor(element: HTMLElement | string, options?: DatexOptions, callback?: DatexCallback);
|
|
78
|
-
private
|
|
79
|
-
private
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
getCurrentTheme(): DatexTheme;
|
|
83
|
-
testDropdowns(): void;
|
|
84
|
-
private mergeOptions;
|
|
24
|
+
private resolveElement;
|
|
25
|
+
private mergeWithDefaults;
|
|
26
|
+
private initializeState;
|
|
27
|
+
private initializeServices;
|
|
85
28
|
private createContainer;
|
|
86
|
-
private
|
|
87
|
-
private
|
|
88
|
-
private
|
|
89
|
-
private
|
|
90
|
-
private containerMouseOver;
|
|
91
|
-
private containerMouseLeave;
|
|
92
|
-
private containerClick;
|
|
93
|
-
private preventBlur;
|
|
29
|
+
private buildContainerTemplate;
|
|
30
|
+
private initializeContainerServices;
|
|
31
|
+
private setupContainerClasses;
|
|
32
|
+
private setupInitialVisibility;
|
|
94
33
|
show(): void;
|
|
95
34
|
hide(): void;
|
|
96
|
-
private removeDocumentListeners;
|
|
97
|
-
private outsideClick;
|
|
98
|
-
private outsideFocus;
|
|
99
35
|
toggle(): void;
|
|
36
|
+
setStartDate(date: Date): void;
|
|
37
|
+
setEndDate(date: Date): void;
|
|
38
|
+
getStartDate(): Date;
|
|
39
|
+
getEndDate(): Date | null;
|
|
40
|
+
setTheme(theme: DatexTheme): void;
|
|
41
|
+
updateValidation(validation: DatexValidation): void;
|
|
42
|
+
validateDate(date: Date): ValidationResult;
|
|
43
|
+
validateDateRange(startDate: Date, endDate: Date): ValidationResult;
|
|
44
|
+
enableKeyboardNavigation(): void;
|
|
45
|
+
disableKeyboardNavigation(): void;
|
|
46
|
+
setKeyboardFocusedDate(date: Date): void;
|
|
47
|
+
remove(): void;
|
|
48
|
+
private storeOldValues;
|
|
49
|
+
private setupDocumentListeners;
|
|
50
|
+
private removeDocumentListeners;
|
|
51
|
+
private displayContainer;
|
|
52
|
+
private hideContainer;
|
|
53
|
+
private positionContainer;
|
|
54
|
+
private revertIfIncomplete;
|
|
55
|
+
private triggerCallbackIfChanged;
|
|
56
|
+
private roundToIncrement;
|
|
57
|
+
private dispatchShowEvent;
|
|
58
|
+
private dispatchHideEvent;
|
|
59
|
+
private cleanup;
|
|
60
|
+
private handleKeyboardDateSelect;
|
|
61
|
+
private clearSelection;
|
|
62
|
+
private showValidationError;
|
|
63
|
+
private setupEventListeners;
|
|
64
|
+
private setupElementEvents;
|
|
65
|
+
private setupContainerEvents;
|
|
66
|
+
private isInputOrButton;
|
|
67
|
+
private handleContainerClick;
|
|
68
|
+
private handleContainerMouseOver;
|
|
69
|
+
private handleContainerMouseLeave;
|
|
70
|
+
private handleContainerChange;
|
|
71
|
+
private handleOutsideClick;
|
|
72
|
+
private handleOutsideFocus;
|
|
73
|
+
private handleElementChange;
|
|
74
|
+
private parseDateParts;
|
|
75
|
+
private handleKeydown;
|
|
76
|
+
private handleRangeClick;
|
|
77
|
+
private handleApplyClick;
|
|
78
|
+
private handleCancelClick;
|
|
79
|
+
private handlePrevClick;
|
|
80
|
+
private handleNextClick;
|
|
81
|
+
private handleDateClick;
|
|
82
|
+
private handleDateHover;
|
|
83
|
+
private handleMonthYearChange;
|
|
100
84
|
private updateView;
|
|
101
85
|
private updateMonthsInView;
|
|
102
|
-
private getStartOfMonth;
|
|
103
|
-
private getEndOfMonth;
|
|
104
|
-
private getStartOfWeek;
|
|
105
86
|
private updateCalendars;
|
|
106
87
|
private renderCalendar;
|
|
107
|
-
private renderDropdowns;
|
|
108
|
-
private getDayClasses;
|
|
109
88
|
private updateFormInputs;
|
|
110
89
|
private updateSelectedDisplay;
|
|
111
|
-
private renderTimePicker;
|
|
112
|
-
private timeChanged;
|
|
113
90
|
private updateElement;
|
|
114
|
-
private
|
|
115
|
-
private clickRange;
|
|
116
|
-
private clickPrev;
|
|
117
|
-
private clickNext;
|
|
118
|
-
private clickDate;
|
|
119
|
-
private hoverDate;
|
|
120
|
-
private updateDateClasses;
|
|
121
|
-
private clickApply;
|
|
122
|
-
private clickCancel;
|
|
123
|
-
private monthOrYearChanged;
|
|
124
|
-
private elementChanged;
|
|
125
|
-
private keydown;
|
|
126
|
-
private showCalendars;
|
|
127
|
-
private hideCalendars;
|
|
91
|
+
private renderRanges;
|
|
128
92
|
private calculateChosenLabel;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
updateRanges(newRanges: Record<string, [Date, Date]>): void;
|
|
135
|
-
private dispatchEvent;
|
|
93
|
+
private updateActiveRange;
|
|
94
|
+
private showCalendars;
|
|
95
|
+
private updateDateClasses;
|
|
96
|
+
private applyTimeToDate;
|
|
97
|
+
private createRangeService;
|
|
136
98
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Datex - Modern Date Range Picker
|
|
3
|
+
* Main entry point for the library
|
|
4
|
+
*/
|
|
2
5
|
export { Datex } from "./datex";
|
|
3
|
-
export type { DatexOptions, DatexTheme, DatexLocale,
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
+
export type { DatexOptions, DatexCallback, DatexTheme, DatexLocale, DatexEvents, CalendarState, PickerState, } from "./types/datex-types";
|
|
7
|
+
export type { DatexValidation, ValidationResult, } from "./services/validation-service";
|
|
8
|
+
export { DEFAULT_THEME, BOOTSTRAP_THEME, MATERIAL_THEME, } from "./constants/themes";
|
|
9
|
+
export { SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from "./constants/locales";
|
|
10
|
+
export { formatDate, addMonths, startOfDay, endOfDay, isAfterDate, isBeforeDate, parseDate, isSameDate, isValidDate, getStartOfMonth, } from "./utils/date-utils";
|