close

 //import these css
 <link rel="stylesheet" href="jq/themes/base/jquery.ui.all.css" />
 <script type="text/javascript" src="jq/jquery-1.7.2.js"></script>
 <script type="text/javascript" src="jq/ui/jquery.ui.core.js"></script>
 <script type="text/javascript" src="jq/ui/jquery.ui.datepicker.js"></script>
    
 //
1.normal case
 
<script type="text/javascript">
    $(function() {
       $(".datepicker").datepicker({
             showOn: "button",
             buttonImage: "calendar.gif",  //the image you want to show
             buttonImageOnly: true,
             changeMonth: true,
             changeYear: true,
             dateFormat: 'yy/mm/dd'         //the date format

      });
    });    
</script>

//2.the control is inside a gridview (or detailview...)
<script type="text/javascript">

    $(function() {
        $("input[id*=TBox_Name]").datepicker({
             showOn: "button",
             buttonImage: "calendar.gif",
             buttonImageOnly: true,
             changeMonth: true,
             changeYear: true,
             dateFormat: 'yy/mm/dd'
         });
     }); 

</script>

//3.the control is inside a gridview (or detailview...) gridview inside updatepanel

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    

//put these codes after ScriptManager-->key point!!!!!!!
<script type="text/javascript">

            // if you use jQuery, you can load them when dom is read.
            $(document).ready(function() {
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.add_initializeRequest(InitializeRequest);
                prm.add_endRequest(EndRequest);

                // Place here the first init of the DatePicker
                $(".datepicker").datepicker({
                   showOn: "button",
                   buttonImage: "calendar.gif",
                   buttonImageOnly: true,
                   changeMonth: true,
                   changeYear: true,
                   dateFormat: 'yy/mm/dd'
                });
            });

            function InitializeRequest(sender, args) {
            }

            function EndRequest(sender, args) {
                // after update occur on UpdatePanel re-init the DatePicker
                $(".datepicker").datepicker({
                    showOn: "button",
                    buttonImage: "calendar.gif",
                    buttonImageOnly: true,
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'yy/mm/dd'
                });
            }
           
        </script>

  </script>

arrow
arrow
    全站熱搜

    就是要紅 發表在 痞客邦 留言(0) 人氣()