jquery日历datepicker的使用方法

浏览数：16 / 时间：2015年06月09日

jquery.ui.datepicker.js 用法: http://blog.csdn.net/zb0567/article/details/7906238

原文 http://blog.csdn.net/cjh6311882/article/details/7478407

找了很久，终于找到了。现在分享。

1.下载jquery，链接css文件。

2.新建一个<div>,如下：

<div id=‘cal‘ ></div>

3.然后就是javascript的代码了，如下：

<script>
        $(document).ready(function() {
            $("#cal").datepicker({dateFormat:‘yy-mm-dd‘});
        });
    </script>

4.ok!现在日历就已经显示出来了！

5.如果希望text文本框也可以弹出日历来让我们选择，那么可以这么做，如下：

<input  type="text" id="cal"  readonly="readonly" >

6.其实，我们可以发现，就是将id改了一下。这就是jquery日历的好用之处啊！

datepicker的一些常用属性：

1.numberOfMonths、showCurrentAtPos显示多个日历

numberOfMonths用于指定一次显示几个日历，showCurrentAtPos则用于指定当前的日历在第几个显示（一般放在中间），效果如下：

注：实现中文显示只需要将jquery.ui.datepicker-zh-CN.js这个js文件导入就可以了，jquery下载时就有。

2.defaultDate设置日历的初始时间

就是默认选中的一个（不是当前时间，当前时间一直和其他日期外观不一样）

例：defaultDate:‘2012-11-11"

3.dateFormat格式化输出字符

dateFormat:‘yy-mm-dd‘

则会输出，例如：2012-11-11 这种样式

最后给个今天做的例子吧！

<script>
        $(document).ready(function() {
            var time=$(‘#datetime‘).val()
                $("#cal").datepicker({showCurrentAtPos:1,defaultDate:‘{{ datetime }}‘, dateFormat:‘yy-mm-dd‘,numberOfMonths:3,onSelect:function(dateText,inst){
                $(‘#datetime‘).attr(‘value‘,dateText);
                thisURl=window.location.host
                location.replace("http://"+thisURl+"/?depart=all&date="+dateText)
            }});

        });
    </script>