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>