Table of Contents

Class TwDatePickerTheme

Namespace
TwBlazor.Configuration.Components
Assembly
TwBlazor.dll

Theme configuration for the date picker components (TwDatePicker and TwDateRangePicker, which reuses the same panel/header/day-button styling for visual consistency between the two). Override any property to customize date picker styles globally.

[ExcludeFromCodeCoverage]
public class TwDatePickerTheme
Inheritance
TwDatePickerTheme
Inherited Members

Constructors

TwDatePickerTheme() 

public TwDatePickerTheme()

Properties

ActiveClass

Gets or sets the classes for active day, month, and year selection buttons.

public required string ActiveClass { get; set; }

Property Value

string

Base

Gets or sets the positioning/layout/typography classes for the picker panel - background, border, rounded corners, and shadow come from the shared TwOverlayTheme via PopoverBuilder instead of being baked in here.

public required string Base { get; set; }

Property Value

string

Body

Gets or sets the classes for the popover body's outer wrapper.

public required string Body { get; set; }

Property Value

string

ButtonClass

Gets or sets the classes for the day, month, and year selection buttons.

public required string ButtonClass { get; set; }

Property Value

string

DayAbbreviation

Gets or sets the classes for the weekday abbreviation shown in each column header.

public required string DayAbbreviation { get; set; }

Property Value

string

DayGrid

Gets or sets the classes for the day-of-month grid's <table> element.

public required string DayGrid { get; set; }

Property Value

string

DayHeaderCellPadding

Gets or sets the padding classes for each weekday column header cell.

public required string DayHeaderCellPadding { get; set; }

Property Value

string

DefaultDateTimeFormat

Gets or sets the default .NET custom date/time format string (24-hour) used by TwDateTimePicker and TwDateTimeRangePicker when their own Format parameter isn't explicitly set and Is12HourFormat is false.

public required string DefaultDateTimeFormat { get; set; }

Property Value

string

DefaultDateTimeFormat12Hour

Gets or sets the default .NET custom date/time format string (12-hour, with an AM/PM designator) used by TwDateTimePicker and TwDateTimeRangePicker when their own Format parameter isn't explicitly set and Is12HourFormat is true.

public required string DefaultDateTimeFormat12Hour { get; set; }

Property Value

string

DefaultFormat

Gets or sets the default .NET custom date format string used by TwDatePicker and TwDateRangePicker when their own Format parameter isn't explicitly set. Change this to switch the whole app's default date format in one place instead of passing Format to every picker individually.

public required string DefaultFormat { get; set; }

Property Value

string

DefaultRangeSeparator

Gets or sets the default separator used between the start and end date/time by TwDateRangePicker and TwDateTimeRangePicker when their own RangeSeparator parameter isn't explicitly set.

public required string DefaultRangeSeparator { get; set; }

Property Value

string

DualMonthColumn

Gets or sets the classes for each column in DualMonthLayout.

public required string DualMonthColumn { get; set; }

Property Value

string

DualMonthLayout

Gets or sets the classes for the layout wrapping TwDateRangePicker's two side-by-side month grids (stacked on narrow screens).

public required string DualMonthLayout { get; set; }

Property Value

string

DualMonthPanelWidth

Gets or sets the extra panel width classes applied only in TwDateRangePicker's day view, where both months are shown side by side.

public required string DualMonthPanelWidth { get; set; }

Property Value

string

Header

Gets or sets the classes for the header that displays navigation between days, months, and decades. Its background comes from the shared PopoverBackground.

public required string Header { get; set; }

Property Value

string

HeaderControls

Gets or sets the classes for the header row containing the previous/title/next navigation controls.

public required string HeaderControls { get; set; }

Property Value

string

HeaderNavButton

Gets or sets the classes for the header's previous/next navigation icon buttons.

public required string HeaderNavButton { get; set; }

Property Value

string

IconGlyph

Gets or sets the classes for the calendar glyph itself.

public required string IconGlyph { get; set; }

Property Value

string

IconTriggerWrapper

Gets or sets the classes for the calendar icon's clickable wrapper within the trigger text field, shared by TwDatePicker, TwDateRangePicker and TwDateTimeRangePicker.

public required string IconTriggerWrapper { get; set; }

Property Value

string

MonthsGrid

Gets or sets the classes for the month quick-pick grid shown in the year view.

public required string MonthsGrid { get; set; }

Property Value

string

NativeInputAppearance

Gets or sets the classes suppressing native browser chrome on the trigger field when the device's native date/time picker is active (see remarks on the callers' own textfieldClasses).

public required string NativeInputAppearance { get; set; }

Property Value

string

PanelMaxHeight

Gets or sets the max-height/scroll classes applied to every popover panel, so a tall calendar stays reachable when there isn't room to show it in full (e.g. a phone with the keyboard open).

public required string PanelMaxHeight { get; set; }

Property Value

string

PanelMaxWidth

Gets or sets the max-width/scroll classes applied to TwDateRangePicker's wider two-month panel, layered on top of PanelMaxHeight.

public required string PanelMaxWidth { get; set; }

Property Value

string

PanelWidth

Gets or sets the width classes for the popover panel's single-month layout, used by TwDatePicker and TwDateTimeRangePicker. TwDateRangePicker widens this further for its two-month layout.

public required string PanelWidth { get; set; }

Property Value

string

PrevMonthClass

Gets or sets the text color classes for a lead-in day from the previous month (the greyed-out, non-interactive cells shown before day 1). Not applied when the day falls within a selected range - see RangeClass - so it stays legible against that tint instead of fighting it with a second, muted color.

public required string PrevMonthClass { get; set; }

Property Value

string

RangeClass

Gets or sets the classes for days that fall strictly between a selected range's start and end (exclusive of the endpoints) in TwDateRangePicker.

public required string RangeClass { get; set; }

Property Value

string

RangeMonthCaptionClass

Gets or sets the classes for the per-calendar "Month Year" caption shown above each grid when TwDateRangePicker displays two months side by side.

public required string RangeMonthCaptionClass { get; set; }

Property Value

string

RangeStageTabInactive

Gets or sets the text color for an inactive Start/End step tab.

public required string RangeStageTabInactive { get; set; }

Property Value

string

RangeStageTabsContainer

Gets or sets the classes for the Start/End step tab row shown in TwDateTimeRangePicker's popover.

public required string RangeStageTabsContainer { get; set; }

Property Value

string

StageTabBase

Gets or sets the base classes for a Start/End step tab button, shared with TwDateTimeRangePicker's picker.

public required string StageTabBase { get; set; }

Property Value

string

TextfieldPadding

Gets or sets the padding classes for the trigger text field, leaving room for the calendar icon.

public required string TextfieldPadding { get; set; }

Property Value

string

WeekdaysHeader

Gets or sets the classes for the header row that displays the weekdays (e.g. Mon, Tue, Wed).

public required string WeekdaysHeader { get; set; }

Property Value

string

YearsGrid

Gets or sets the classes for the year quick-pick grid shown in the decade view.

public required string YearsGrid { get; set; }

Property Value

string
Edit this page