viewMode: 'clock' defaults to date view if date components are not deactived

[cdubz]

• Operating system and version: macOS 12.4
• Browser and version: Firefox 102.0b4, Chrome 102.0.5005.61, Safari 15.5 (17613.2.7.1.8)
• Version of the plugin: 6 🔥
• StackBlitz fork: https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-yytw2n

I'm hoping to have a picker that supports all the default time and date components but that opens to the clock view mode initially. If I set the picker options as simply --

{ display: { viewMode: 'clock' } }

the picker opens in the default calendar view mode expect that toggles are reversed (i.e., the calendar toggle has a calendar icon and the label is "Select Date" and when I change to the time selector the toggle is a clock icon and the label is "Select Time").

The clock view mode works as expected if the date components are disabled (though I think this is just the default behavior).

[cdubz]

Doing a little digging around... this seems to be cause, at least in part, by this logic during configuration initialization:

tempus-dominus/src/js/tempus-dominus.ts

Lines 355 to 364 in b54bb33

	// Update view mode if needed
	if (
	CalendarModes[this.optionsStore.currentCalendarViewMode].name !==
	newConfig.display.viewMode
	) {
	this.optionsStore.currentCalendarViewMode = Math.max(
	CalendarModes.findIndex((x) => x.name === newConfig.display.viewMode),
	this.optionsStore.minimumCalendarViewMode
	);
	}

In my use case CalendarModes[this.optionsStore.currentCalendarViewMode].name would be the default calendar and newConfig.display.viewMode would be clock.

CalendarModes does not have a clock entry:

tempus-dominus/src/js/utilities/calendar-modes.ts

Lines 5 to 35 in 3ab219d

	const CalendarModes: {
	name: keyof ViewMode;
	className: string;
	unit: Unit;
	step: number;
	}[] = [
	{
	name: 'calendar',
	className: Namespace.css.daysContainer,
	unit: Unit.month,
	step: 1,
	},
	{
	name: 'months',
	className: Namespace.css.monthsContainer,
	unit: Unit.year,
	step: 1,
	},
	{
	name: 'years',
	className: Namespace.css.yearsContainer,
	unit: Unit.year,
	step: 10,
	},
	{
	name: 'decades',
	className: Namespace.css.decadesContainer,
	unit: Unit.year,
	step: 100,
	},
	];

So the result of the Math.max operation above ends up being the default this.optionsStore.minimumCalendarViewMode (0 = calendar).

It doesn't seem like it would make sense to just add clock to CalendarModes so maybe some special handling is needed in the config initialization conditional?

[cdubz]

It seems the configuration initialization process is not at fault/relevant here -- #2584 instead fixes the issue by incorporating a check of the options in the show event where there is already special logic for handling the "clock only" use case.

[Eonasdan]

This is a bug that I have pending code to fix.

[cdubz]

Ok -- feel free to scrap that PR. Thanks!

[Eonasdan]

Hi, please check the latest version. Thanks for your PR btw.