分享一款日历的控件,适合新手

今天和同事整理了一个第三方的控件，也整理了一下，在这里抱着分享大态度和博友们分享。

这个是官网，好像官网没有提供下载。官网点击此处

这个控件是用jquery开发的，这里有几个外部的借口，我们需要对他了解，才能更好的使用这个控件。

chosendate:  选择当前的日期，你可以先new Date()就是默认控件选择当前日期，也可以指定一个定的日期（yyyy-MM-dd）这个是我的格式，我把输出格式变过，官网的数据格式是MM/dd/yyyy，要想知道怎么改，看下面的操作吧。
startdate: 开始时间，比如是1990.
enddate: 2020, 结束时间，比如是2000
x: 100, y: 30 。x、y是这个日历控件距离你的text文本框左上角的相对距离。

 

如果你不喜欢我的日期格式，或者想改掉官网的输出格式，那就看这里，首先我们要开打cal.js文件夹，这个是官网作者写的日历控件的代码，大概在最后几行的有个函数叫做jQuery.fn.simpleDatepicker.formatOutput = function (dateObj)，我想看了这个函数名你们也猜到了这个函数是干什么的用的，吧下面的格式改成自己喜欢的风格。

最后贴上我的html静态的代码：

<html>
    <head>
        <title>日历控件</title>
        <link href="calendar.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="cal.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function () {    
                    $('input.three').simpleDatepicker({ 
                                            chosendate: new Date(), 
                                            startdate: 1990, 
                                            enddate: 2020,  
                                            x: 100, y: 30 
                                    });
            });
        </script>
    </head>
    <body>
        <p><input class="three" type="text" name="date" value="" style="width:100px;height:30px;" /></p>
    </body>
</html>

最后提供一个下载包 供大家分享。

下载点击此处

posted @ 2012-08-03 15:38  唯吴独尊  阅读(915)  评论(0)  编辑  收藏  举报