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

How to change calendar image in DatePickerFor

1 Answer 43 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Yuhua
Top achievements
Rank 1
Yuhua asked on 07 Mar 2014, 02:54 PM
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.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Mar 2014, 04:29 PM
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

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

Tags
Date/Time Pickers
Asked by
Yuhua
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or