Problems with getting JQuery UI datepicker to show in asp.net mvc 2 c#

Question

I want a datepicker to show when i click my textbox, but it does not, I have done some searching and nothing helped me.

submittime.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<form action="/Item/Submit" method="post">
    <fieldset>
        <legend>Set time</legend>
        <div class ="editor-label"><label for="expire"><b>End date</b></label></div> 
        <div class ="editor-field"><input id="expire" name="expire" type="text" style="width: 500px; height: 20px"/></div>
        <script type="text/javascript">
            $(function() {
                $('#expire').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy'
                });
            }); 
        </script>
    <input type="submit" value="Submit" style="width: 72px" />
    </fieldset>
</form>
</asp:Content>

I have added following code to Site.Master

<link type="text/css" href="css/themename/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

It shows my textbox but no datepicker shows when i click it, any help would be nice.

Answer 1

You're missing the $(document).ready()

so your code should look something like this:

$(document).ready(function(){
    $('#expire').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy'
    });
});

jsFiddle example: http://jsfiddle.net/hcBL2/