JQuery UI之(五)日期选择——Datepicker

一、          前言

JQuery官方的Datepicker控件，可以很方便的使用，但是在我看来他所提供的功能却稍显简单，并不能完全地符合我们的需求，所以，如果只是很简单的需求的话使用JQuery提供的Datepicker控件是没问题的，但是如果需要比较复杂的功能的话，请参考这个网址：http://www.my97.net/dp/demo/

 

二、          使用Datepicker

引用样式及js库：

    <link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" />

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

      使用Datepicker：

        <asp:TextBox ID="txtDatepicker" runat="server"></asp:TextBox>

       

        <script type="text/javascript">

            $(function($){

                $("#txtDatepicker").datepicker();

            });

        </script>

      这样就可以使用Datepicker控件了，但是功能太简单而且是英文的，如果要使用的话，需要稍加配置。

 

三、          升级版Datepicker

重新配置Datepicker如下：

        <script type="text/javascript">

            $(function($){

                $("#txtDatepicker").datepicker({    //  记得要括在大括号之内

                    dateFormat:"yy-mm-dd",  //设置日期格式

                    changeMonth:true,   //是否提供月份选择

                    changeYear:true,    //是否提供年份选择

                    dayNamesMin: ['日','一','二','三','四','五','六'],  //日期简写名称

                    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']  //月份简写名称

                });

            });

        </script>

      Datepicker还有很多的配置选项，如果有需要可以参考官方文档或者直接打开js文件查看。

 

四、          如果觉得官方的Datepicker不过使用的话，可以使用上面提供的网址中的日期控件