Question

Yesterday I attempted to ask a question why my jquery-ui Datepicker code wasn’t working, I am going to try again, this time with a bit more description, because I really am lost, the exact same code was working two days ago, and I don’t know what happened.

I use the Jquery UI datePicker. I have it in my site to prevent users from entering in dates that don’t make any sense or are not formatted correctly, or perhaps are just simply formatted the wrong way. I put the appropriate jquery libraries into my project master page… like so…

    <link rel="stylesheet" type="text/css" href="../../Content/jqUIcss/jquery-ui-1.8.14.custom.css" />      
    <script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqUI/jquery-ui-1.8.14.custom.min.js"></script>
    <script src="../../Scripts/jqUI/jquery.ui.datepicker.js" type="text/javascript"></script> 

I have a text box that I try and link to a datepicker instance, like so…

    ><%=Html.TextBox(string.Format("{0}", paths[i]), (row.Contains("Date") ? nodes["value"].Value : row), new { @class = "datepicker"+dateCount })%>

and finally, I have some code, that will supposedly invoke this whole thing (jquery code of course)…

    $(document).ready(function () {

    $(".datepicker0").datepicker({
        showOn: 'both',
        dateFormat: 'dd M yy',
        changeMonth: true,
        changeYear: true,
        changeDay: true
    });

I am completely stumped? Why would this stop working all of a sudden? Now, I did make some changes to how I rendered my form to the page, I changed it from a one column table that listed all the elements, to a that is delimited by paragraphs. Why on Earth would that stop it from working? And to prove that I am not crazy (well, its not really proof, but its anecdotal) the datepicker on my other page has stopped working as well, and I did not change one frigging thing on that page… I am absolutely confounded, and I don’t know where to beggin to solve this? Has anyone else experienced this problem? What could be possible causes and most importantly how can I resolve this so that it doesn’t happen again? Is there a way that I can just get the calendar to pop up by clicking inside the text box area?

Answer 1

Yes, it’s a well known bug. You should copy and paste the CSS code from the JQuery UI in the demo they use, and replace the code with your code.