jQuery UI DatePicker image not showing.

Question

I have the following init code for the datepicker, but the default 'Choose Date' link is displayed, not the image. This is in an MVC project, but that shouldn't affect anything to the best of my knowledge.

    $(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 rendered buttonImage option looks like this:

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

An img tag like this renders the image correctly:

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

Answer 1

ProfK - i use the datepicker inside a shared EditorTemplate and my code looks very similar to the above. here's what I have under 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] - usage in view:

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

give it a try, see if it helps out any...

jim

Answer 2

Use firefox and install the firebug extension. And monitor the network tab for any errors.