JQuery UI DatePicker image not showing

Question

I have the following initialization code for datepicker, but the Choose Date link is displayed by default, not the image. This is in the MVC project, but it should not affect anything as far as I know.

    $(function () {
        $(".date-picker").datePicker({
            showOn: 'both',
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button', 
            buttonImage: '<%= Url.Content("~/Content/images/date_picker2.gif") %>',
    });

The presented parameter is buttonImageas follows:

buttonImage: '/Content/images/date_picker2.gif',

A similar img tag displays the image correctly:

<img src='<%= Url.Content("~/Content/images/date_picker2.gif") %>' />

Answer 1

ProfK - I use datepicker inside a common EditorTemplate, and my code is very similar to the one above. here is what I have in Views-> Shared-> EditorTemplates-> DateTime.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DateTime?>" %>

<%string name = ViewData.TemplateInfo.HtmlFieldPrefix;%>
<%string id = name.Replace(".", "_");%>

<div class="editor-label">
    <%= Html.LabelFor(model => model) %>
</div>
<div class="editor-field">
    <%= Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd-MM-yyyy") : string.Empty), new { @class = "date" }) %>
    <%= Html.ValidationMessageFor(model => model)%>
</div>      

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=id%>").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button', 
            buttonImage: '<%=Url.Content("~/Content/images/calendar.gif") %>'
        });
    });
</script>

[edit] - :

<%= Html.EditorFor(m => m.StartDate) %>

, , ...

Answer 2

firefox firebug. .

Answer 3

Or, if there is a text box, you can simply do this:

$('#datepickerImage').click(function() {
  $('#datepickerTextBox').datepicker('show');
});