Change DatePicker icon

3 posts, 1 answers
  1. Anil
    Anil avatar
    3 posts
    Member since:
    Jun 2017

    Posted 18 Oct Link to this post

    I am trying to use kendo Jquery Date Picker.
    I am referrring https://docs.telerik.com/kendo-ui/controls/editors/datepicker/overview.html for the same.

    But instead of default k-i-calendar class I want to use k-i-calendar-date class. But I am not able to change.

    Icons: https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
    https://docs.telerik.com/kendo-ui/api/javascript/ui/button/configuration/iconclass in this example it talks about changing default icon class.

     

    $("#button").kendoButton({ iconClass: "fa fa-male"});

     

    I tried using the same for my date picker but it doesnot work.
    kendo.jQuery("#ang_layout1_asof_sdate").kendoDatePicker({

      iconClass: "k-icon k-i-calendar-date"

    });

  2. Answer
    Hetali
    Admin
    Hetali avatar
    18 posts

    Posted 18 Oct Link to this post

    Hi Anil,

    In order to replace the default icon, please use the .removeClass() and the .addClass() method respectively. For example:

    $(".k-icon").removeClass("k-i-calendar");
    $(".k-icon").addClass('k-i-calendar-date');

    In this sample Dojo, the default icon is replaced by the k-i-calendar-date icon.

    I hope this helps. Please let me know if you have any further questions pertaining to the changing of the icon in the Kendo UI DatePicker.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Anil
    Anil avatar
    3 posts
    Member since:
    Jun 2017

    Posted 15 Nov in reply to Hetali Link to this post

    Thanks It works
Back to Top