Autocomplete date based by only entering date but the current month and year is automatically selected

1 Answer 50 Views
DateTimePicker
Usman
Top achievements
Rank 1
Usman asked on 20 Aug 2021, 04:55 AM

Hi team,

We are working with a requirement where user would only wants to enter date for the selection and control suggest current month and year.

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 24 Aug 2021, 11:31 AM

Hello Usman,

Currently, the DateTimePicker control does not provide an API that lets you do this out-of-the-box. That said, I have prepared an example project, which tries to achieve the wanted behavior. In it, I have set the date picker control's date format to "d". This allows for entering only the days of the month and if it's in the correct range, the tooltip shows the full date. 

this.datePicker.Culture = new System.Globalization.CultureInfo("en-US");
this.datePicker.Culture.DateTimeFormat.ShortDatePattern = "d";

In addition, I have introduced a style targeting the Calendar control of the date picker, so that it hides previous month and next month arrows as well as the names and numbers of the weeks. And then set it to the CalendarStyle property of the DatePicker control.

<Style x:Key="calendarStyle" TargetType="telerik:RadCalendar">
    <Setter Property="AreWeekNamesVisible" Value="False"/>
    <Setter Property="AreWeekNumbersVisible" Value="False"/>
    <Setter Property="PreviousButtonVisibility" Value="Collapsed"/>
    <Setter Property="NextButtonVisibility" Value="Collapsed"/>
</Style>
<telerik:RadDatePicker CalendarStyle="{StaticResource calendarStyle}"/>

Also, set the DisplayDateStart and DisplayDateEnd properties, to be the first and last days of the current month and year. Now, the calendar displays only the days from the 1st to the 31st day of the month.

var firstDayOfMonth = new DateTime(DateTime.UtcNow.Year, DateTime.UtcNow.Month, 1);
var lastDayOfMonth = firstDayOfMonth.AddMonths(1).AddDays(-1);

this.DatePicker.DisplayDateStart = firstDayOfMonth;
this.DatePicker.DisplayDateEnd = lastDayOfMonth;

In conclusion, I have attached the sample project, so could you give it a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DateTimePicker
Asked by
Usman
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or