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

1. Hide the initially rendered days of the week within the Popup Calendar of the DatePicker for Telerik UI for ASP.NET Core.
2. Create a flag variable which will hold the days of the week.
3. To select the days of the week, handle the .MonthTemplate() and pass the current date as an argument.
4. Within the function handler, parse the date argument to a Date object. To get the current day, use the .getDay() method and obtain it from the previously defined flag variable.

Index.cshtml

    @(Html.Kendo().DatePicker()
          .Name("datepicker")
          .Value(DateTime.Today)
          .Footer("Today - #=kendo.toString(data, 'd') #")
          .MonthTemplate(month => month.Content("#= getDays(date) #"))
    )

Script.js

    <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>

Styles.css

    <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.

More ASP.NET Core DatePicker Resources

• ASP.NET Core DatePicker Documentation

• ASP.NET Core DatePicker Demos

• ASP.NET Core DatePicker Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Select the Current Days of the Week in the DatePicker
• Client-Side API Reference of the DatePicker for ASP.NET Core
• Server-Side API Reference of the DatePicker for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base