DateTime Format in Blazor DateTimePicker Component

16 Sep 20241 minute to read

Display Date and Time format

The display date and time format can be used to specify how the date and time value is displayed or entered in a DateTimePicker control

By default, the DateTimePicker’s format is based on the culture. You can also set the own Custom Format or Standard Format by using the Format property.

Once the date format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the date format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used.

  • RAZOR
  • @using Syncfusion.Blazor.Calendars
    
    <SfDateTimePicker TValue="DateTime?" Format="yyyy-MM-dd hh:mm:ss" @bind-Value="@Value"></SfDateTimePicker>
    
    
    @code {
        public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
    }

    Date Time Format in Blazor DateTimePicker

    Input Formats

    The input format can be used to specify how the date and time value is entered in a DateTimePicker control.

    The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own Custom Format or Standard Format by using the InputFormats property.

  • RAZOR
  • @using Syncfusion.Blazor.Calendars
    
    <SfDateTimePicker TValue="DateTime?" Format="yyyy-MM-dd hh:mm:ss" InputFormats='new string[] { "dd/MM/yyyy hh:mm", "MM-dd-yyyy HH:mm", "yyyy/MM/dd hh mm tt" }' @bind-Value="@Value"></SfDateTimePicker>
    
    
    @code {
        public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
    }