- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • DatePicker

    Picking a date can be tough without context. A BitDatePicker offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates.

    Usage

    Basic
    Explore basic configurations of the BitDatePicker, including labels, placeholders, week numbers, and highlighting features.















    Min & Max
    Set minimum and maximum selectable dates to restrict user input to a specific range of days, months, or years.


    Min: Now.AddDays(-5)
    Max: Now.AddDays(+5)


    Min: Now.AddMonths(-2)
    Max: Now.AddMonths(+1)


    Min: Now.AddYears(-5)
    Max: Now.AddYears(+1)
    Text input
    The input field will open the BitDatePicker, and clicking the field again will dismiss the BitDatePicker and allow text input. Please note to use this feature, you must enter the date in the exact DateFormat provided for the BitDatePicker.
    Date format
    Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed. In this example, we are formatting and parsing dates as dd=MM(yy).
    Style & Class
    Explore styling and class customization for BitDatePicker, including component styles, custom classes, and detailed styles.


    Component's Style & Class:





    Styles & Classes:


    Binding
    Bind a selected date to a model or view, allowing two-way data binding with the BitDatePicker.


    Selected date: 01/17/2020 00:00:00 +00:00
    Culture
    By default, BitDatePicker picks the current culture. But you can provide your own instance of CultureInfo for any custom culture.
    You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.



    Templates
    Utilize various templates within the BitDatePicker, such as custom label templates, day cell templates, and year cell templates.










    Responsive
    Enable responsive design for the BitDatePicker, allowing it to adjust its layout and appearance based on the screen size.

    Hour/Minute step
    Adjust the increment step for hours and minutes when using the BitDatePicker's time selection feature.


    Standalone
    Use the BitDatePicker in a standalone mode, allowing it to function independently without a surrounding form or container.









    Validation
    Implement form validation with BitDatePicker using data annotations, ensuring the user selects a valid date before submitting the form.



    RTL
    Use BitDatePicker in right-to-left (RTL).

    API

    BitDatePicker parameters
    Name
    Type
    Default value
    Description
    AllowTextInput bool false Whether or not the DatePicker allows a string date input.
    AutoClose bool true Whether the DatePicker closes automatically after selecting the date.
    CalloutAriaLabel string Calendar Aria label of the DatePicker's callout for screen readers.
    CalloutHtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional html attributes for the DatePicker's callout.
    Classes BitDatePickerClassStyles null Custom CSS classes for different parts of the BitDatePicker.
    Culture CultureInfo CultureInfo.CurrentUICulture CultureInfo for the DatePicker.
    DateFormat string? null The format of the date in the DatePicker.
    DayCellTemplate RenderFragment<DateTimeOffset>? null Custom template to render the day cells of the DatePicker.
    GoToNextMonthTitle string Go to next month The title of the Go to next month button (tooltip).
    GoToNextYearRangeTitle string Next year range {0} - {1} The title of the Go to next year range button (tooltip).
    GoToNextYearTitle string Go to next year {0} The title of the Go to next year button (tooltip).
    GoToPrevMonthTitle string Go to previous month The title of the Go to previous month button (tooltip).
    GoToPrevYearRangeTitle string Previous year range {0} - {1} The title of the Go to previous year range button (tooltip).
    GoToPrevYearTitle string Go to previous year {0} The title of the Go to previous year button (tooltip).
    GoToTodayTitle string Go to today The title of the GoToToday button (tooltip).
    HasBorder bool false Determines if the DatePicker has a border.
    HighlightCurrentMonth bool false Whether the month picker should highlight the current month.
    HighlightSelectedMonth bool false Whether the month picker should highlight the selected month.
    IconTemplate RenderFragment? null Custom template for the DatePicker's icon.
    IconLocation BitIconLocation BitIconLocation.Right Determines the location of the DatePicker's icon.
    IconName string CalendarMirrored The name of the DatePicker's icon.
    InvalidErrorMessage string? null The custom validation error message for the invalid value.
    IsMonthPickerVisible bool true Whether the month picker is shown or hidden.
    IsOpen bool false Whether or not this DatePicker is open.
    IsResponsive bool false Enables the responsive mode in small screens.
    IsUnderlined bool false Whether or not the Text field of the DatePicker is underlined.
    Label string? null The text of the DatePicker's label.
    LabelTemplate RenderFragment? null Custom template for the DatePicker's label.
    MaxDate DateTimeOffset null The maximum date allowed for the DatePicker.
    MinDate DateTimeOffset? null The minimum date allowed for the DatePicker.
    MonthCellTemplate RenderFragment<DateTimeOffset>? null Custom template to render the month cells of the DatePicker.
    MonthPickerToggleTitle string {0}, change month The title of the month picker's toggle (tooltip).
    OnClick EventCallback The callback for clicking on the DatePicker's input.
    OnFocus EventCallback The callback for focusing the DatePicker's input.
    OnFocusIn EventCallback The callback for when the focus moves into the DatePicker's input.
    OnFocusOut EventCallback The callback for when the focus moves out of the DatePicker's input.
    Placeholder string string.Empty The placeholder text of the DatePicker's input.
    SelectedDateAriaAtomic string Selected date {0} The text of selected date aria-atomic of the calendar.
    ShowClearButton bool false Whether the clear button should be shown or not when the BitDatePicker has a value.
    ShowCloseButton bool false Whether the DatePicker's close button should be shown or not.
    ShowGoToToday bool true Whether the GoToToday button should be shown or not.
    ShowMonthPickerAsOverlay bool false Show month picker on top of date picker when visible.
    ShowTimePicker bool false Whether or not render the time-picker.
    ShowWeekNumbers bool false Whether the week number (weeks 1 to 53) should be shown before each week row.
    StartingValue DateTimeOffset? null Specifies the date and time of the date-picker when it is opened without any selected value.
    Styles BitDatePickerClassStyles null Custom CSS styles for different parts of the BitDatePicker.
    Standalone bool false Whether the date-picker is rendered standalone or with the input component and callout.
    TabIndex int 0 The tabIndex of the DatePicker's input.
    TimeFormat BitTimeFormat BitTimeFormat.TwentyFourHours The time format of the time-picker, 24H or 12H.
    WeekNumberTitle string Week number {0} The title of the week number (tooltip).
    YearCellTemplate RenderFragment<int>? null Custom template to render the year cells of the DatePicker.
    YearPickerToggleTitle string {0}, change year The title of the year picker's toggle (tooltip).
    YearRangePickerToggleTitle string {0} - {1}, change month The title of the year range picker's toggle (tooltip).
    HourStep int 1 Determines increment/decrement steps for date-picker's hour.
    MinuteStep int 1 Determines increment/decrement steps for date-picker's minute.
    BitInputBase parameters
    Name
    Type
    Default value
    Description
    DisplayName string? null Gets or sets the display name for this field.
    InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
    Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
    OnChange EventCallback<TValue?> Callback for when the input value changes.
    ReadOnly bool false Makes the input read-only.
    Required bool false Makes the input required.
    Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
    BitInputBase public members
    Name
    Type
    Default value
    Description
    InputElement ElementReference The ElementReference of the input element.
    FocusAsync() () => ValueTask Gives focus to the input element.
    FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.
    BitComponentBase parameters
    Name
    Type
    Default value
    Description
    AriaLabel string? null The aria-label of the control for the benefit of screen readers.
    Class string? null Custom CSS class for the root element of the component.
    Dir BitDir? null Determines the component direction.
    HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
    Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
    IsEnabled bool true Whether or not the component is enabled.
    Style string? null Custom CSS style for the root element of the component.
    Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
    BitComponentBase public members
    Name
    Type
    Default value
    Description
    UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
    RootElement ElementReference The ElementReference of the root element.
    BitDatePickerClassStyles properties
    Name
    Type
    Default value
    Description
    Root string? null Custom CSS classes/styles for the root element of the BitDatePicker.
    Focused string? null Custom CSS classes/styles for the focused state of the BitDatePicker.
    Label string? null Custom CSS classes/styles for the Label of the BitDatePicker.
    InputWrapper string? null Custom CSS classes/styles for the input wrapper of the BitDatePicker.
    InputContainer string? null Custom CSS classes/styles for the input container of the BitDatePicker.
    InputContainer string? null Custom CSS classes/styles for the input container of the BitDatePicker.
    Input string? null Custom CSS classes/styles for the input of the BitDatePicker.
    Icon string? null Custom CSS classes/styles for the icon of the BitDatePicker.
    Overlay string? null Custom CSS classes/styles for the overlay of the BitDatePicker.
    Callout string? null Custom CSS classes/styles for the callout of the BitDatePicker.
    CalloutContainer string? null Custom CSS classes/styles for the callout container of the BitDatePicker.
    Group string? null Custom CSS classes/styles for the group of the BitDatePicker.
    DayPickerWrapper string? null Custom CSS classes/styles for the day-picker's wrapper of the BitDatePicker.
    DayPickerHeader string? null Custom CSS classes/styles for the day-picker's header of the BitDatePicker.
    DayPickerMonth string? null Custom CSS classes/styles for the day-picker's month of the BitDatePicker.
    DayPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitDatePicker.
    PrevMonthNavButton string? null Custom CSS classes/styles for the Go to previous month button of the BitDatePicker.
    PrevMonthNavIcon string? null Custom CSS classes/styles for the Go to previous month icon of the BitDatePicker.
    GoToTodayButton string? null Custom CSS classes/styles for the Go to today button of the BitDatePicker.
    GoToTodayIcon string? null Custom CSS classes/styles for the Go to today icon of the BitDatePicker.
    CloseButton string? null Custom CSS classes/styles for the close button of the BitDatePicker.
    CloseButtonIcon string? null Custom CSS classes/styles for the close button icon of the BitDatePicker.
    NextMonthNavButton string? null Custom CSS classes/styles for the Go to next month button of the BitDatePicker.
    NextMonthNavIcon string? null Custom CSS classes/styles for the Go to next month icon of the BitDatePicker.
    DaysHeaderRow string? null Custom CSS classes/styles for the header row of the days of the BitDatePicker.
    WeekNumbersHeader string? null Custom CSS classes/styles for the header of the week numbers of the BitDatePicker.
    DaysRow string? null Custom CSS classes/styles for each row of the days of the BitDatePicker.
    WeekNumber string? null Custom CSS classes/styles for the week number of the BitDatePicker.
    DayButton string? null Custom CSS classes/styles for each day button of the BitDatePicker.
    TodayDayButton string? null Custom CSS classes/styles for today day button of the BitDatePicker.
    SelectedDayButton string? null Custom CSS classes/styles for selected day button of the BitDatePicker.
    TimePickerContainer string? null Custom CSS classes/styles for the time-picker's main container of the BitDatePicker.
    TimePickerWrapper string? null Custom CSS classes/styles for the time-picker's wrapper of the BitDatePicker.
    TimePickerHourMinuteSeparator string? null Custom CSS classes/styles for the time-picker's hour/minute separator of the BitDatePicker.
    TimePickerDivider string? null Custom CSS classes/styles for the time-picker's divider of the BitDatePicker.
    TimePickerMinuteInput string? null Custom CSS classes/styles for the time-picker's minute input of the BitDatePicker.
    TimePickerAmPmContainer string? null Custom CSS classes/styles for the time-picker's Am Pm container of the BitDatePicker.
    TimePickerAmButton string? null Custom CSS classes/styles for the time-picker's Am button of the BitDatePicker.
    TimePickerPmButton string? null Custom CSS classes/styles for the time-picker's Pm button of the BitDatePicker.
    Divider string? null Custom CSS classes/styles for the main divider of the BitDatePicker.
    YearMonthPickerWrapper string? null Custom CSS classes/styles for the year-month-picker's wrapper of the BitDatePicker.
    MonthPickerHeader string? null Custom CSS classes/styles for the month-picker's header of the BitDatePicker.
    YearPickerToggleButton string? null Custom CSS classes/styles for the year-picker's toggle button of the BitDatePicker.
    MonthPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDatePicker.
    PrevYearNavButton string? null Custom CSS classes/styles for the Go to previous year button of the BitDatePicker.
    PrevYearNavIcon string? null Custom CSS classes/styles for the Go to previous year icon of the BitDatePicker.
    NextYearNavButton string? null Custom CSS classes/styles for the Go to next year button of the BitDatePicker.
    NextYearNavIcon string? null Custom CSS classes/styles for the Go to next year icon of the BitDatePicker.
    MonthsContainer string? null Custom CSS classes/styles for the months container of the BitDatePicker.
    MonthsRow string? null Custom CSS classes/styles for each row of the months of the BitDatePicker.
    MonthButton string? null Custom CSS classes/styles for each month button of the BitDatePicker.
    YearPickerHeader string? null Custom CSS classes/styles for the year-picker's header of the BitDatePicker.
    MonthPickerToggleButton string? null Custom CSS classes/styles for the month-picker's toggle button of the BitDatePicker.
    YearPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitDatePicker.
    PrevYearRangeNavButton string? null Custom CSS classes/styles for the Go to previous year-range button of the BitDatePicker.
    PrevYearRangeNavIcon string? null Custom CSS classes/styles for the Go to previous year-range icon of the BitDatePicker.
    NextYearRangeNavButton string? null Custom CSS classes/styles for the Go to next year-range button of the BitDatePicker.
    NextYearRangeNavIcon string? null Custom CSS classes/styles for the Go to next year-range icon of the BitDatePicker.
    YearsContainer string? null Custom CSS classes/styles for the years container of the BitDatePicker.
    YearsRow string? null Custom CSS classes/styles for each row of the years of the BitDatePicker.
    YearButton string? null Custom CSS classes/styles for each year button of the BitDatePicker.
    BitVisibility enum
    Name
    Value
    Description
    Visible 0 Show content of the component.
    Hidden 1 Hide content of the component,though the space it takes on the page remains.
    Collapsed 2 Hide content of the component,though the space it takes on the page gone.
    BitIconLocation enum
    Name
    Value
    Description
    Left 0 Show the icon at the left side.
    Right 1 Show the icon at the right side.
    BitTimeFormat enum
    Name
    Value
    Description
    TwentyFourHours 0 Show time pickers in 24 hours format.
    TwelveHours 1 Show time pickers in 12 hours format.
    BitVisibility enum
    Name
    Value
    Description
    Visible 0 The content of the component is visible.
    Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
    Collapsed 2 The component is hidden (display:none).
    BitDir enum
    Name
    Value
    Description
    Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
    Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
    Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
    • On this page