Selecting Week Days in the DatePicker
Environment
| Product | Telerik UI for ASP.NET Core DatePicker |
| Progress Telerik UI for ASP.NET Core version | Created with the 2022.3.913 version |
Description
How can I select the days of the week from the Telerik UI for ASP.NET Core DatePicker?
Solution
- Hide the initially rendered days of the week within the Popup Calendar of the DatePicker for Telerik UI for ASP.NET Core.
- Create a flag variable which will hold the days of the week.
- To select the days of the week, handle the
.MonthTemplate()and pass the current date as an argument. - Within the function handler, parse the date argument to a
Dateobject. To get the current day, use the.getDay()method and obtain it from the previously defined flag variable.
@(Html.Kendo().DatePicker()
.Name("datepicker")
.Value(DateTime.Today)
.Footer("Today - #=kendo.toString(data, 'd') #")
.MonthTemplate(month => month.Content("#= getDays(date) #"))
)
<script>
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Create a flag variable for the days of the week.
function getDays(date){
var parsedDate = new Date(date); // Parse the date argument.
var weekday = weekdays[parsedDate.getDay()]; // Get the current week day from the previously defined flag variable.
return weekday;
}
</script>
<style>
/* Popup window size week headers.*/
.k-calendar-thead > .k-calendar-tr
{
display:none;
}
/* Popup window size. */
.k-calendar .k-calendar-view {
width: 330px;
padding: 0px;
font-size:10px;
}
</style>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on selecting the days of the week within the DatePicker.