Attribute options
-
-
- Theme (theme | for example the built in material theme - dp-material):
-
-
-
-
-
-
-
-
-
- Disabled (disabled):
-
-
-
-
-
-
-
-
-
- Required Validation (required):
-
-
-
-
-
-
-
-
+ @if (isValidConfig('theme')) {
+
+
+ Theme (theme | for example the built in material theme - dp-material):
+
+
+ }
+
+ @if (isValidConfig('disabled')) {
+
+
+
+
+
+
+ Disabled (disabled):
+
+
+ }
+
+ @if (isValidConfig('required')) {
+
+
+
+
+
+
+ Required Validation (required):
+
+
+ }
+
+ @if (isValidConfig('minValidation')) {
+
+
+
+
+
Min-Date Validation (minDate):
-
+ }
-
- {{pickerMode}}
-
-
+
-
+ {{pickerMode}}
+
+
+
+ @if (isValidConfig('maxValidation')) {
+
Max-Date Validation (maxDate):
-
+ }
-
-
-
+
-
+
+
+
+ @if (isValidConfig('displayDate')) {
+
+ }
+
+ @if (isValidConfig('minTimeValidation')) {
+
Display Date (displayDate):
-
-
-
-
-
-
-
-
- Min-Time Validation (minTime):
-
-
-
-
-
-
-
-
-
- Max-Time Validation (maxTime):
-
-
-
-
-
-
-
-
-
- Placeholder (placeholder):
-
-
+
-
-
-
+
+
+
+
+
+ Min-Time Validation (minTime):
+
+
+ }
+
+ @if (isValidConfig('maxTimeValidation')) {
+
+
+
+
+
+
+ Max-Time Validation (maxTime):
+
+
+ }
+
+ @if (isValidConfig('placeholder')) {
+
+
+
+
+
+
+ Placeholder (placeholder):
+
+
+ }
+
+
+ Config options
-
+ @if (isValidConfig('locale')) {
+
Locale (locale):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('firstDayOfWeek')) {
+
First Day of The week (firstDayOfWeek):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('format')) {
+
Date Format (format):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('monthFormat')) {
+
Month Format (monthFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('min')) {
+
Min Selectable Date (min):
-
+ }
-
-
-
+
-
+
+
+
+ @if (isValidConfig('max')) {
+
Max Selectable Date (max):
-
+ }
-
-
-
+
-
+
+
+
+ @if (isValidConfig('minTime')) {
+
Min Selectable Time (minTime):
-
+ }
-
-
-
+
-
+
+
+
+ @if (isValidConfig('maxTime')) {
+
Max Selectable Time (maxTime):
-
+ }
-
-
-
+
-
+
+
+
+ @if (isValidConfig('allowMultiSelect')) {
+
Allow Multiple Selection (allowMultiSelect):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('closeOnSelect')) {
+
+
+
+
+
Close after selection (closeOnSelect):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('closeOnSelectDelay')) {
+
+
+
+
+
Closing Delay in ms (closeOnSelectDelay):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('openOnFocus')) {
+
Show picker when input receives focus (openOnFocus):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('openOnClick')) {
+
+
+
+
+
Show picker when input is clicked (openOnClick):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('onOpenDelay')) {
+
+
+
+
+
Open Delay in ms (onOpenDelay):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('weekdayFormat')) {
+
Weekday Format (weekDayFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('disableKeypress')) {
+
Disable keyboard on input (disableKeypress):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('drops')) {
+
+
+
+
+
Drops (drops):
-
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('opens')) {
+
+
+
+
+
+
Opens (opens):
-
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('hideInputContainer')) {
+
+
+
+
+
+
Hide Input Container (hideInputContainer):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('showNearMonthDays')) {
+
+
+
+
+
Show near month days (showNearMonthDays):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('showWeekNumbers')) {
+
+
+
+
+
Show week numbers (showWeekNumbers):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('enableMonthSelector')) {
+
+
+
+
+
Enable month selector (enableMonthSelector):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('yearFormat')) {
+
+
+
+
+
Year Format (yearFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('showGoToCurrent')) {
+
Show go to current button (showGoToCurrent):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('hideOnOutsideClick')) {
+
+
+
+
+
Hide on outside click (hideOnOutsideClick):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('unSelectOnClick')) {
+
+
+
+
+
Allow un select selected date (unSelectOnClick):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('dayBtnFormat')) {
+
+
+
+
+
Day Button Format (dayBtnFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('monthBtnFormat')) {
+
Month Button Format (monthBtnFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('hours12Format')) {
+
12 Hour Format (hours12Format):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('hours24Format')) {
+
24 Hour Format (hours24Format):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('meridiemFormat')) {
+
Meridiem Format (meridiemFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('minutesFormat')) {
+
Minutes Format (minutesFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('minutesInterval')) {
+
Minutes Interval (minutesInterval):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('secondsFormat')) {
+
Seconds Format (secondsFormat):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('secondsInterval')) {
+
Seconds Interval (secondsInterval):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('showSeconds')) {
+
Show seconds (showSeconds):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('showTwentyFourHours')) {
+
+
+
+
+
Show twenty four hours (showTwentyFourHours):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('timeSeparator')) {
+
+
+
+
+
Time Separator (timeSeparator):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('showMultipleYearsNavigation')) {
+
Show multiple years navigation buttons (showMultipleYearsNavigation):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('showMultipleYearsNavigation')) {
+
+
+
+
+
Multiple years navigate by (multipleYearsNavigateBy):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('returnedValueType')) {
+
Returned Value Type (returnedValueType):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('closeOnEnter')) {
+
+ }
Close On Enter (closeOnEnter):
-
-
-
-
-
-
-
+
+ }
+
+ @if (isValidConfig('numOfMonthRows')) {
+
+
+
+
+
Number of Month rows (numOfMonthRows):
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ API
-
+ @if (isValidConfig('apiopen')) {
+
Open (api.open()):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('apiclose')) {
+
diff --git a/src/app/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.html b/src/app/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.html
index 433ef98f..e71d8db4 100644
--- a/src/app/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.html
+++ b/src/app/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.html
@@ -1,51 +1,60 @@
Close (api.close()):
-
+ }
-
-
+
-
+
+
+ @if (isValidConfig('moveCalendarTo')) {
+
Move (api.moveCalendarTo('14-01-1987')):
-
+ }
-
+
-
+
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="daytime">
diff --git a/src/app/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.html b/src/app/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.html
index 327b13f9..10e45caf 100644
--- a/src/app/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.html
+++ b/src/app/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.html
@@ -1,50 +1,59 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="daytime">
diff --git a/src/app/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.html b/src/app/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.html
index 85991f9b..bea0789c 100644
--- a/src/app/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.html
+++ b/src/app/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.html
@@ -1,49 +1,58 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="daytimeInline">
diff --git a/src/app/demo/date-pickers/day/day-demo/day-demo.component.html b/src/app/demo/date-pickers/day/day-demo/day-demo.component.html
index 47faac84..3b867e0f 100644
--- a/src/app/demo/date-pickers/day/day-demo/day-demo.component.html
+++ b/src/app/demo/date-pickers/day/day-demo/day-demo.component.html
@@ -1,51 +1,60 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="dayPicker">
diff --git a/src/app/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.html b/src/app/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.html
index bb53a13b..dd95bace 100644
--- a/src/app/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.html
+++ b/src/app/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.html
@@ -1,50 +1,59 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="dayDirective">
diff --git a/src/app/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.html b/src/app/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.html
index 3f64b26b..c47de7a1 100644
--- a/src/app/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.html
+++ b/src/app/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.html
@@ -1,47 +1,56 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="dayInline">
diff --git a/src/app/demo/date-pickers/month/month-demo/month-demo.component.html b/src/app/demo/date-pickers/month/month-demo/month-demo.component.html
index 4ba1c71c..427cd34c 100644
--- a/src/app/demo/date-pickers/month/month-demo/month-demo.component.html
+++ b/src/app/demo/date-pickers/month/month-demo/month-demo.component.html
@@ -1,51 +1,60 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="monthPicker">
diff --git a/src/app/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.html b/src/app/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.html
index a2ff7675..cee6098a 100644
--- a/src/app/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.html
+++ b/src/app/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.html
@@ -1,50 +1,59 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="monthDirective">
diff --git a/src/app/demo/date-pickers/month/month-inline/month-inline-demo.component.html b/src/app/demo/date-pickers/month/month-inline/month-inline-demo.component.html
index 9efe782e..9e0b89ba 100644
--- a/src/app/demo/date-pickers/month/month-inline/month-inline-demo.component.html
+++ b/src/app/demo/date-pickers/month/month-inline/month-inline-demo.component.html
@@ -1,46 +1,55 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="monthInline">
diff --git a/src/app/demo/date-pickers/time/time-demo/time-demo.component.html b/src/app/demo/date-pickers/time/time-demo/time-demo.component.html
index ee1c1a77..7e3ee82a 100644
--- a/src/app/demo/date-pickers/time/time-demo/time-demo.component.html
+++ b/src/app/demo/date-pickers/time/time-demo/time-demo.component.html
@@ -1,51 +1,60 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="timePicker">
diff --git a/src/app/demo/date-pickers/time/time-directive-demo/time-directive-demo.component.html b/src/app/demo/date-pickers/time/time-directive-demo/time-directive-demo.component.html
index f4a1572d..a39a1748 100644
--- a/src/app/demo/date-pickers/time/time-directive-demo/time-directive-demo.component.html
+++ b/src/app/demo/date-pickers/time/time-directive-demo/time-directive-demo.component.html
@@ -1,50 +1,59 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="timeDirective">
diff --git a/src/app/demo/date-pickers/time/time-inline-demo/time-inline-demo.component.html b/src/app/demo/date-pickers/time/time-inline-demo/time-inline-demo.component.html
index d3052410..5bc02c7b 100644
--- a/src/app/demo/date-pickers/time/time-inline-demo/time-inline-demo.component.html
+++ b/src/app/demo/date-pickers/time/time-inline-demo/time-inline-demo.component.html
@@ -1,45 +1,54 @@
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+
-
- ;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [DemoComponent],
+ providers: [GaService],
+ schemas: [NO_ERRORS_SCHEMA]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(DemoComponent);
+ component = fixture.componentInstance;
+ });
+
it('should create an instance', () => {
- const component = new DemoComponent(null);
expect(component).toBeTruthy();
});
});
diff --git a/src/app/demo/demo.component.ts b/src/app/demo/demo.component.ts
index 7b2aee5e..9ac8aa4f 100644
--- a/src/app/demo/demo.component.ts
+++ b/src/app/demo/demo.component.ts
@@ -2,7 +2,7 @@ import debounce from '../../../projects/ng2-date-picker/src/lib/common/decorator
import {IDatePickerConfig} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker-config.model';
import {DatePickerComponent} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker.component';
import {DatePickerDirective} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker.directive';
-import {Component, HostListener, OnInit, ViewChild} from '@angular/core';
+import {Component, HostListener, inject, OnInit, ViewChild} from '@angular/core';
import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
import dayjs, {Dayjs} from 'dayjs';
import {GaService} from './common/services/ga/ga.service';
@@ -95,8 +95,7 @@ export class DemoComponent implements OnInit {
formGroup: UntypedFormGroup;
isAtTop: boolean = true;
- constructor(private readonly gaService: GaService) {
- }
+ private readonly gaService = inject(GaService);
ngOnInit(): void {
this.formGroup = this.buildForm();
diff --git a/src/main.ts b/src/main.ts
index c48f4b47..30df6a55 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
import './polyfills';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {enableProdMode} from '@angular/core';
+import {enableProdMode, provideZoneChangeDetection} from '@angular/core';
import {environment} from './environments/environment';
import {DemoModule} from './app/demo.module';
@@ -8,4 +8,4 @@ if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(DemoModule);
+platformBrowserDynamic().bootstrapModule(DemoModule, { applicationProviders: [provideZoneChangeDetection()], });
diff --git a/tsconfig.json b/tsconfig.json
index e8d56565..9e659dd8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,14 +17,10 @@
"skipLibCheck": true,
"declaration": true,
"experimentalDecorators": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "es2020",
- "lib": [
- "es2020",
- "dom"
- ],
"useDefineForClassFields": false
},
"angularCompilerOptions": {
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 04683fd0..8aab2921 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -2,13 +2,9 @@
"compilerOptions": {
"sourceMap": true,
"declaration": false,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
- "lib": [
- "es2016",
- "dom"
- ],
"outDir": "./out-tsc/spec",
"module": "es2020",
"target": "ES2022",
-
-
-
-
+ (closeCalendar)="closeCalendar()"
+ (moveCalendarTo)="moveCalendarTo($event)"
+ (onConfigChange)="onConfigChange($event)"
+ (onDisabledChange)="onDisabledChange($event)"
+ (onDisplayDateChange)="onDisplayDateChange($event)"
+ (onMaterialThemeChange)="onMaterialThemeChange($event)"
+ (onMaxTimeValidationChange)="onMaxTimeValidationChange($event)"
+ (onMaxValidationChange)="onMaxValidationChange($event)"
+ (onMinTimeValidationChange)="onMinTimeValidationChange($event)"
+ (onMinValidationChange)="onMinValidationChange($event)"
+ (onPlaceholderChange)="onPlaceholderChange($event)"
+ (onRequireValidationChange)="onRequireValidationChange($event)"
+ (openCalendar)="openCalendar()"
+ (onLocaleChange)="onLocaleChange($event)"
+ [config]="config"
+ [localeVal]="locale"
+ pickerMode="timeInline">
diff --git a/src/app/demo/demo.component.spec.ts b/src/app/demo/demo.component.spec.ts
index 2923d538..0c84050d 100644
--- a/src/app/demo/demo.component.spec.ts
+++ b/src/app/demo/demo.component.spec.ts
@@ -1,8 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
import {DemoComponent} from './demo.component';
+import {GaService} from './common/services/ga/ga.service';
describe('Component: Demo', () => {
+ let component: DemoComponent;
+ let fixture: ComponentFixture
-
+ }
required
- invalid format
- minDate invalid
- maxDate invalid
+ @if (ready) {
+
+
-
+
+
+
+ @if (control.errors?.required) {
+
required
+ }
+ @if (control.errors?.format) {
+ invalid format
+ }
+ @if (control.errors?.minDate) {
+ minDate invalid
+ }
+ @if (control.errors?.maxDate) {
+ maxDate invalid
+ }
+