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>