开发者

jQuery UI DatePicker image not showing

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: tru开发者_开发知识库e,
            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") %>' />


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


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


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

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜