Customizing date picker - removing previous selected date ighlighting

5 posts, 0 answers
  1. Jenny
    Jenny avatar
    7 posts
    Member since:
    Jan 2016

    Posted 22 May Link to this post

     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 .
  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 25 May Link to this post

    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;

    Boyan Dimitrov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mohamed
    Mohamed avatar
    13 posts
    Member since:
    May 2015

    Posted 08 Jul in reply to Boyan Dimitrov Link to this post



    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?



  4. Sethilraj
    Sethilraj avatar
    5 posts
    Member since:
    Feb 2014

    Posted 10 Jul in reply to Mohamed Link to this post

    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>

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

        <link rel="stylesheet" href=""/>
        <link rel="stylesheet" href=""/>
        <link rel="stylesheet" href=""/>
        <link rel="stylesheet" href=""/>

        <script src=""></script>
        <script src=""></script>
    <input id="datepicker" />
    var DatePicker = $("#datepicker").kendoDatePicker({
        open: display

    function display(){
        DatePicker.value(new Date());


  5. Mohamed
    Mohamed avatar
    13 posts
    Member since:
    May 2015

    Posted 11 Jul in reply to Sethilraj Link to this post

    Thanks a lot Sethilraj, this worked for me
Back to Top