How we add date picker

How we add date picker


Below is my script
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="style/ui.all.css" rel="Stylesheet" />
        <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-
personalized-1.6rc6.js"></script>
        <script type="text/javascript">
            {literal}
            $(function(){
            $('.date').datepicker({
                    inline: true
                });
                });
            function myfunction()
            {
                html = '<input type="text" id="n" class="date" onClick=\'datepick
("n");\'>';
                $("#main").append(html);
            }
            function datepick(id)
            {
                $('#'+id).datepicker({
                    inline: true
                });
            }
            {/literal}
        </script>
        <style type="text/css">
        {literal}
            /*demo page css*/
            body{ font: 70.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .date{}
        {/literal}
        </style>
    </head>
    <body>
<div id="main" style="height:100%; width:100%">
<input type="text" id="w" class="date">
<input type="text" id="f" class="date">
</div>
<input type="button" value="ok" onClick="myfunction();"\>
    </body>
</html>
its work good but when i append new input in a div its not working how
can i do this