This is a migrated thread and some comments may be shown as answers.

Customizing date picker - removing previous selected date ighlighting

4 Answers 2911 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jenny
Top achievements
Rank 1
Jenny asked on 23 May 2016, 04:41 AM
 When i select a date  and clears out the input field, ie I select  5/24/2016 from calendar , the input field displays the same . Then I clears the input field . Now when I open the calendar , it shows the previously selected date (5/24/2016) in a highlighted outlined box . I don't want the calendar to remember/show my previous selections . The previously selected date and non- selected date, other than current date should not show any difference  . Please help .

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 25 May 2016, 06:45 AM

Hello Jenny,

The focused state facilitates keyboard navigation and cannot be disabled via configuration. You can remove it manually by using the following CSS rule:

.k-calendar .k-state-focused
{
  box-shadow: none;
}

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mohamed
Top achievements
Rank 1
answered on 08 Jul 2016, 02:44 PM

Hi,

 

I have this small issue when I select a date in the date picker, let's say I select a date of birth in June 1974 and then I delete the value and try to select a new one, the calendar will open in June 1974.

 

How can I reset that so if the date value is empty the calendar will show the current month?

 

Thanks

0
Sethilraj
Top achievements
Rank 1
answered on 10 Jul 2016, 01:15 PM

Hi Mohamed you can try this code.

1) When you delete the value in date picker and open the calendar it will display the date of present day.

2) If you select a value and haven't deleted it and opened the calendar the it will display the date corresponding to the value in date picker.

Hope this Helps.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="datepicker" />
<script>
var DatePicker = $("#datepicker").kendoDatePicker({
    open: display
}).data("kendoDatePicker");

function display(){
  if(!$("#datepicker").val())
    DatePicker.value(new Date());
  }
  
</script>
</body>
</html>

 

0
Mohamed
Top achievements
Rank 1
answered on 11 Jul 2016, 01:55 PM
Thanks a lot Sethilraj, this worked for me
Tags
Date/Time Pickers
Asked by
Jenny
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Mohamed
Top achievements
Rank 1
Sethilraj
Top achievements
Rank 1
Share this question
or