How to change calendar image in DatePickerFor

[Yuhua]

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" })
                                             )
</td>

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?

Thanks.

[Dimo]

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.

Regards,
Dimo
Telerik