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不过使用的话，可以使用上面提供的网址中的日期控件