The Telerik Calendar component makes it easy to both display dates and control the user’s input (and all you need is a little bit of markup).
In my previous post, I combined several Telerik Blazor UI components to create a rich form with minimal effort. In the page I created, I used the
DateInput component to handle displaying and accepting the date a customer signed up to our company's loyalty program. That's not very graphical (but it was easy). In this post, I'm going to upgrade to the
Before I begin looking at my options, though: If you (a) followed those previous posts, and (b) upgraded to Preview 6 of Blazor… well, there have been some changes. Most of the changes are the result of Microsoft standardizing the names of Blazor directives that appear as attributes on the elements that represent Blazor components. Those attribute names are all prefixed with an
@ sign (i.e.
@ondblclick, and so on). These changes are just part of a move on the Blazor team's move to standardize attribute names, reduce some redundancy in how these are used, and support some additional functionality to be added in the future.
The native attributes on the components' elements (the attributes defined by Telerik) do not, however, get an
@ prefix. However, if you are setting those attributes to some code or binding them to a field or property, the value for the attribute does need to be prefixed with an
@ symbol. If this sounds confusing… well, I have lots of examples in this post. But there's also an easy way to tell as you're typing in code: If you type in an attribute name and it doesn't appear in boldface, prefix it with an
@ symbol; if the attribute name doesn't require an
@ symbol, prefix the value you're binding the attribute to (except for those occasions where you really are just setting the attribute to some string value).
In addition, if you want to appear hip and happening, in your
.razor file you can change
@code (my code worked equally well with either). The announcement of Preview 6 describes some additional changes, not all of which I was able to get to work.
You should also make sure that you're using the latest version of the Telerik UI for Blazor components (I'm using 1.2). This version, among other changes, takes advantage of some bug fixes to Blazor that enable the
ValueChanged event on the
Editor's Note: Since the time of writing, Telerik UI for Blazor 1.3 has been released, with new features and no breaking changes. You can see everything that's new here.
TelerikCalendar provides a full graphical calendar that allows the user to select dates and, by default, page through months to find the date they want. The component has
Min attributes that let you control how far the user can page into the future and the past (the calendar also automatically disables dates outside the
Max range in displayed months). By default, only one month is displayed at a time, but you can override that by setting the
Views attribute to the number of months you want to display on the screen at a time.
Of course, I want to display the user's sign up date when the calendar is first displayed. For that, I can use the component's
Value attribute. This means that displaying a date in the
TelerikCalendar can be as simple as adding this markup to your page:
And that would be fine if all I wanted to do was display the customer's signup date. But I want to give the user the ability to select a new date.
You have two (2) options when it comes to retrieving a date the user has selected. If you don't intend to edit the date, then you can bind the component to a field or property using Blazor's
@bind-Value attribute. While the
Value attribute binds the data in one direction,
@bind-Value implements two-way databinding, allowing you to pick up the date the user has selected.
@bind-Value gives this HTML (notice that, when using Blazor attributes as opposed to the Telerik component's attributes, the
@ sign moves out from between the double quotes and onto the attribute name):
However, if you'd prefer to take some action as soon as the user selects a date, you'll want to use Telerik's
ValueChanged event and tie the event to some method in your code. Your method will automatically be passed the new, selected value date the user clicks on it. Your markup would look like this:
And the code to catch the new value would look like this:
private void SignUpDateChanged(DateTime newDate)
DateTime d = newDate;
As attractive as this option is, it does have one drawback: You can't combine the
ValueChanged attribute with the
Value attributes. Using
ValueChanged generates a compile-time error; using
ValueChanged (at least in my testing) seems to prevent the calendar component from highlighting the date the user selects (an issue that, assuming it doesn't just reflect a problem with my testing, will probably be addressed in a later release of either Blazor or the Telerik components).
There's a great deal more to say about the calendar (it supports, for example, multiple views at the year, month, and day level) which I'll discuss in my next blog post.