Unveiling New Date-Only and Time-Only Features in Blazor Pickers
Tags: blazor, development, whatsnew, ui
Published: 2023-11-10 03:35:54

---
title: Unveiling New Date-Only and Time-Only Features in Blazor Pickers
published: true
date: 2023-11-09 12:00:18 UTC
tags: blazor, development, whatsnew, ui
canonical_url: https://www.syncfusion.com/blogs/post/date-time-only-blazor-pickers.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsoeufzjlqx2lyjljh0p.png
---
We’re thrilled to present the latest enhancements in our Syncfusion Blazor [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker "Blazor DatePicker") and [TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker "Blazor TimePicker") components. We’ve enhanced the date and time inputs for optimal user experience, emphasizing accuracy and simplicity.

Our new date-only and time-only features allow you to input just the date or time as needed. These features, ideal for scheduling events, setting reminders, or logging data, are designed to minimize confusion, reduce errors, and enhance user experience.

Let’s explore these updates and see how they can transform your experience with our Syncfusion Blazor DatePicker and TimePicker components!

## Prerequisites

- **.NET 7 or above:**  Full serialization support for these types only came with .NET 7, so ensure you have .NET 7 or a later version installed in your development environment.
- **Syncfusion Blazor Calendar packages:** Available from [Syncfusion Blazor components on NuGet](https://www.nuget.org/packages?q=Syncfusion.Blazor&frameworks=&tfms=&packagetype=&prerel=true&sortby=relevance "NuGet") and the [official documentation](https://blazor.syncfusion.com/documentation/nuget-packages#syncfusionblazorcalendars "Syncfusion Blazor Calendar packages"). Remember the necessary licenses or trial keys.

## Getting started with Syncfusion Blazor components

Before proceeding, refer to the getting started documentation for the [Blazor DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started "Blazor DatePicker Component") and [TimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started "Blazor TimePicker Component") components.

## Introducing date-only support for Blazor DatePicker

The date-only feature in the Blazor DatePicker empowers developers to configure the control to accept date inputs, removing the time component entirely. This streamlines the user interface and simplifies data entry, as users are now free from selecting a time.

Refer to the following code example.

```js
@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateOnly" @bind-Value="@Value"></SfDatePicker>

@code
{
    public DateOnly Value { get; set; } = new DateOnly(2022, 11, 12);
}
```

The **@bind-Value** attribute establishes a two-way binding between the **Value** property and the **DatePicker** , ensuring seamless synchronization between the user input and the app’s data model.

With this elegant configuration, the DatePicker morphs into a date-only picker, enabling users to select dates without the distraction of time input.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Blazor-DatePicker-Component-with-Date-Only-Support-1.jpg" alt="Blazor DatePicker Component with Date-Only Support" style="width:100%">

  <figcaption>Blazor DatePicker Component with Date-Only Support</figcaption>

</figure>

## Introducing Time-Only Support for the TimePicker Component

Similarly, the time-only support feature for the TimePicker component lets developers create a time-specific input, exclusively focusing on the time without any date selection. This is perfect for scenarios where users only need to pick a specific time, such as setting same-day reminders.

To enable time-only support, developers can use the following **C#** code.

```js
@using Syncfusion.Blazor.Calendars
    
<SfTimePicker TValue="TimeOnly" @bind-Value="@Value" ></SfTimePicker>

@code
{
    public TimeOnly Value { get; set; } = new TimeOnly(12, 00, 00);
}
```

Once again, the **@bind-Value** attribute facilitates seamless interaction between the user input and the app’s data model, ensuring the selected time is accurately captured.

Now, the TimePicker is a time-only picker, allowing users to choose their desired time without distractions from date selection.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Blazor-TimePicker-Component-with-Time-Only-Support-1.jpg" alt="Blazor TimePicker Component with Time-Only Support" style="width:100%">

  <figcaption>Blazor TimePicker Component with Time-Only Support</figcaption>

</figure>

## Date-Only Support Beyond the DatePicker

It’s worth noting that the date-only support extends beyond the DatePicker component. Other date-related components like [Calendar](https://blazor.syncfusion.com/documentation/calendar/getting-started "Getting started with Blazor Calendar component") and [DateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started "Getting started with Blazor DateRangePicker component") also benefit from this feature. This enables you to create consistent and focused date input experiences throughout your Blazor app.

## Conclusion

We appreciate your company in this exploration of the new date-only and time-only features in our Syncfusion Blazor [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker "Blazor DatePicker") and [TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker "Blazor TimePicker") components. These enhancements have transformed how we handle date and time inputs in Blazor apps, offering users a streamlined and simplified interface.

If you’re new to Syncfusion, download a free trial of [Essential Studio for Blazor](https://www.syncfusion.com/downloads/blazor "Essential Studio for Blazor License and Downloads page") and start exploring its controls immediately.

If you have questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). Our dedicated team is always ready to assist you! Stay tuned for more updates.

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [What’s New in Syncfusion Blazor: 2023 Volume 3](https://www.syncfusion.com/blogs/post/syncfusion-blazor-2023-volume-3.aspx "Blog: What’s New in Syncfusion Blazor: 2023 Volume 3")
- [Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid](https://www.syncfusion.com/blogs/post/nested-grid-in-blazor-treegrid.aspx "Blog: Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid")
- [Smartly Customize the Blazor Linear Gauge to Reproduce a Step Progress Bar](https://www.syncfusion.com/blogs/post/blazor-linear-gauge-to-step-progress-bar.aspx "Blog: Smartly Customize the Blazor Linear Gauge to Reproduce a Step Progress Bar")