# Date

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Date

 RbDate component provides a date and time picker with calendar popup and input masking. Supports various formats, cultures, and time zones.

 Basic Usage

 Simple date picker with default settings and culture-aware formatting.

 Show code

 Select Date 

 With Clear Button 

 Selected Date: Wednesday, August 19, 2026

 Variants

 Different visual styles: Default, Outlined and Filled variants.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Default 

 Outlined 

 Filled 

 Required Field

 Mark inputs as required with asterisk indicator for all variants.

 Show code

 Default Required 

 Outlined Required 

 Filled Required 

 With Time

 Date picker that includes time selection with hours, minutes, and seconds.

 Show code

 Select Date & Time 

 With Short Time (HH:mm) 

 12-Hour Format 

 Full DateTime: Wednesday, 19 August 2026 10:12:57

 Short Time: 08/19/2026 10:12

 12-Hour: 08/19/2026 10:12

 Only Time

 Time picker without date selection, useful for scheduling and time-based inputs.

 Show code

 Time (24H) 

 Time (12H with AM/PM) 

 Short Time (HH:mm) 

 24H Format: 00:00:00

 12H Format: 12:00:00 AM

 Short Time: 00:00

 Culture & Format

 Different date formats based on culture settings (US, EU, etc).

 Show code

 US Format (MM/dd/yyyy) 

 UK Format (dd/MM/yyyy) 

 German Format (dd.MM.yyyy) 

 Japanese Format (yyyy/MM/dd) 

 US: 8/19/2026

 UK: 19/08/2026

 German: 19.08.2026

 Japanese: 2026/08/19

 Fixed Date Parts

 Lock specific parts of the date (year, month, or day) for constrained inputs.

 Show code

 Fixed Year (2024) 

 Fixed Month (December) 

 Fixed Day (15th of month) 

 Fixed Year & Month (Jan 2025) 

 Fixed Year: 

 Fixed Month: 

 Fixed Day: 

 Fixed Year & Month: 

 BodyClick Mode

 Click anywhere on the input to open picker. Input is readonly to prevent manual typing.

 Show code

 Click to Select Date 

 With Time - BodyClick 

 Date: Wednesday, 19 August 2026

 Date & Time: Wednesday, 19 August 2026 10:12:57

 Time: 10:12:57

 Readonly & Disabled

 Control input interaction states with Readonly and Disabled parameters.

 Show code

 Normal 

 Readonly 

 Disabled 

 Normal: Wednesday, 19 August 2026

 Readonly: Wednesday, 12 August 2026

 Disabled: Wednesday, 26 August 2026

 RTL Support

 Use the component inside an RTL container with localized labels and values.

 Show code

 تاريخ الزيارة 

 تاريخ التسليم 

 ✕

 Contents