[jQuery]date-picker的使用

使用这个插件要下载两个东西，一个是date-picker.js，一个是style.css文件。其中style.css你要选取一下，因为它还包括整体的一些css设定，与date-picker.js关系不大。style.css中的 a.date-picker 需要一个图片，感觉 date-picker 中的不好看(这个你要单独下载，通过图片另存为)，所以我使用了 django 中的图片，并且根据 shareplat 进行了修改。

使用 date-picker 很简单。分为以下几步(以SharePlat为例)：

1. 在Html的head中加入js和css的引用

    <script type="text/javascript" src="/site_media/js/calendar.js"></script>
    <link href="/site_media/css/date-picker.css" rel="stylesheet" type="text/css" />

2. 在$(document).ready()中加入如下代码：

    <script type="text/javascript">
    $(document).ready(function()｛
        $.datePicker.setDateFormat('ymd','-');
        $.datePicker.setLanguageStrings(['日', '一', '二', '三', '四', '五', '六'],
     ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十－月', '十二月'],
     ｛p:'上一月', n:'下一月', c:'关闭', b:'选择日期'｝
    );

        $('#date').datePicker();
    ｝);

date-picker 可以有一些配置。

setDateFormat可以定年月日的显示和分隔符

setLanguageStrings可以设定日历的语言

然后$('#date').datePicker()就可以自动在一个input元素后面生成一个链接(它显示为一个图标)，当点击这个链接时，会弹出日期选择窗口，然后就可以选择了。

3. 设定对应的元素

    <input id="date" type="text" name="date"/>

这里id的值是与上面的$('#date')是匹配的。

评论

2 楼 liyanboss 2008-01-23  

楼上的给的那个很不错呀，好象我用jquery自带的那个，还点不到今天，好奇怪呀？？

1 楼 holygrace.cn 2007-12-07  

http://www.holygrace.cn/project/calendar.htm