Kendo Date Picker box shadow shows on every same date on every month

1 Answer 65 Views
Date/Time Pickers DateInput DateRangePicker
vendhan
Top achievements
Rank 1
vendhan asked on 28 Oct 2022, 09:46 AM

I was looking for css fix for the current date focus on kendo datepicker input, where i found this article in kendo site

https://docs.telerik.com/kendo-ui/knowledge-base/datepicker-auto-change-focus

But the issue is for every month the date is focused.

this is the current month and current date

but when i click next month the same date is showed with box shadow.But i want to focus only the current month and current date

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 02 Nov 2022, 09:23 AM

Hi, Vendhan,

The KB article that you found is showcasing how you can move to the next portion of the date when you type something in the input. When you first focus the input, the "day" part will be highlighted. After you type a number (let's say 21) the "month" part will be highlighted automatically.

If you want to remove the focused state from the calendar cell, you can use the following approach:

        $("#datepicker").kendoDatePicker();
        
        let dp = $("#datepicker").data("kendoDatePicker");
        
        dp.one("open", (e) => {
          let calendar = e.sender.dateView.calendar;
          calendar.bind("navigate", () => {
            setTimeout(() => {
              let focusedCell = calendar.element.find(".k-focus");
              focusedCell.removeClass("k-focus");
            });
          });
        });

Dojo

https://dojo.telerik.com/@gdenchev/ayoroxoN 

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Date/Time Pickers DateInput DateRangePicker
Asked by
vendhan
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or