textfield not displaying date picked from jquery d

<script type="text/javascript">  
    $(document).ready(function () 
    {  
        $('.date').datepicker  
            ({  
                dateFormat: 'mm/dd/yyyy',  
                 showStatus: true                
                }  
            });  
        });  

</script>  
<div>  
    Date: <input type="text" id="datepicker"/>  
</div>  
<div>  
     @Html.TextBox("toDate", Model.toDate.ToString("dd/MM/yyyy"), new { @class = "date" })  
</div>

The above is cshtml page.. I am clueless why the date that i click on the datepicker wont show up on the texbox/input .. Can you help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>WeeklyReport</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <link href="//Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="//Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="//Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="//Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="//Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="//Scripts/jquery.infieldlabel.min.js" type="text/javascript"></script>
</head>
<body>
</div>
    <div class="content">
         <div class="topSpacer">
        </div>
        <div class="maincontent">
            <script type="text/javascript"> 
    $(document).ready(function () {
        $('.date').datepicker
            ({
                dateFormat: 'mm/dd/yyyy',
                 showStatus: true,
                highlightWeek: true,
                showAnim: "scale",
                firstDay: 6,
                showOptions: {
                    origin: ["top", "left"]},
                 onSelect:    function() {         
                }
            });


        });

    $(function() {
        $("#datepicker").datepicker();
    });

</script>
<div>
    Enter search criteria
</div>
<div style="float: left">
<p>Date: <input type="text" id="datepicker"/></p>

</div>
<div style="float: left; padding-left: 30px">
    <input class="date" id="toDate" name="toDate" type="text" value="15/12/2011" />&nbsp
    EndDate
</div>


        </div>
    </div>
</body>
</html>
   `

What is this mess? What are you asking? In your question you didn't show how your code look like so we can only be guessing here. Normally when you ask a question you should show precisely how your code looks.

So here's a guess I can make to improve your code with a working example:

View:

@model AppName.Models.SomeViewModel
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.date').datepicker({
            showStatus: true,
            highlightWeek: true,
            showAnim: 'scale',
            firstDay: 6,
            showOptions: {
                origin: [ 'top', 'left' ]
            },
            onSelect: function () {

            }
        });
        $('#datepicker').datepicker();
    });
</script>

<div>  
    Date: <input type="text" id="datepicker"/>  
</div>  
<div>  
    @Html.TextBox(
        "toDate", 
        Model.toDate.ToString("dd/MM/yyyy"), 
        new { @class = "date" }
    )
</div>