jquery日历datepicker的使用方法

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>