How to change calendar image in DatePickerFor

2 posts, 0 answers
  1. Yuhua
    Yuhua avatar
    4 posts
    Member since:
    May 2013

    Posted 07 Mar 2014 Link to this post

    Hi there,

    I am using DatePicker in my web page as this.
    <td class="td-header-input">
    @(Html.Kendo().DatePickerFor(p => p.MyDate).Format("MM/dd/yyyy").ParseFormats(new String[] { "MM/dd/yyyy" })
                                                  .HtmlAttributes(new { id = "date_1", data_bind = "value: MyDate", @class = "header-input header-dropdownlist heasder-datepicker", style = "width:100px" })

    Instead of the default calendar image shown to the right side of datepicker, I would like to use my own version of image. I tried to set .k-i-calendar like this
    .k-i-calendar {
      background: url(../images/myCalendaricon.png) no-repeat center;
      display: inline-block;

    But nothing shows. not even the default calendar image. Can someone tell me how to use my own image in datePicker?


  2. Dimo
    Dimo avatar
    8318 posts

    Posted 10 Mar 2014 Link to this post

    Hi Yuhua,

    Your CSS code works on my side, when I set another image URL.

    Most probably your custom icon is not placed in the expected location, defined by the URL. Please check the HTTP requests in the browser's developer console to make sure the image is served.


    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. UI for ASP.NET AJAX banner
Back to Top