Question

Alright, so I’m trying to switch over from having to enter a manual date and time to using jquery to select the date and time.

I didnt think it would be too hard.

My View:

<%= Html.LabelFor(x => x.DDate) %>       
<%= Html.EditorFor(x => x.DDate) %>
<%= Html.ValidationMessageFor(x => x.DDate)%> <br />

My Site.Master(I’m also using this: http://trentrichardson.com/examples/timepicker/):

<script type="text/javascript" src="/Content/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Content/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="/Content/jquery-ui-timepicker-addon.js"></script>
<script  type="text/javascript">
        $('.dp').datetimepicker({
            ampm: true
        }); 
</script>

DateTime.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>  
<%= Html.TextBox("",  String.Format("{0:MM-dd-yyyy}", Model.HasValue ? Model : DateTime.Today), new { @class = "dp"})%>  

Now I know somethings working right becuase when I load the page, there is a date preset with today’s date.

However, when I click the textbox, NOTHING shows up.

Does anyone have an ideas what I’m doing wrong?

Answer 1

Try waiting for the document to be ready before manipulating it, otherwise at the time you execute your $('.dp') selector there is no corresponding elements loaded yet:

<script type="text/javascript">
    $(function() {
        $('.dp').datetimepicker({
            ampm: true
        }); 
    });
</script>

Another possibility is to move this script at the end of your document (just before the closing </body>). This way you no longer need to wrap it in a document.ready handler.