2011年12月28日 星期三

jQuery-ui datepicker 修改大小、日期下拉、預設日期、可選擇日期範圍、最大可選擇日期、日期格式(內容修正))

這幾天用 jQuery-ui 的 datepicker 來做日期的選取時,發現會有很多需要修改的地方
以下就是紀錄這次修改的地方

1. 修改顯示大小
未修改時會發現顯示的大小沒有像官網一樣大小,反而有點大,這時可依照以下方式修改大小

未修改前,如下圖

  

修改方式如下:
以 jquery-ui 官網上所下載的壓縮檔為例 jquery-ui-1.8.16.custom.zip
解壓縮後,請編輯 css/ui-lightness/jquery-ui-1.8.16.custom.css
第 500 行 .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
增加 font-size: 62.5%; <==可自行設定百分比或用 px 的方式設定,例:100px
如下:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size: 62.5%; }

修改後,如下圖:

2. 日期下拉
datepicker 預設是沒有可以下拉選日期的,所以有時選日期只能一直往左右點,有點麻煩

未修改前,如下圖:

這時可以在 javascript 的部份加入以下部份

         $(function() {
            // Datepicker
            $('#birthday').datepicker(
                    {
                        changeYear : true,
                        changeMonth : true
                    });

        });

修改後,如下圖:
3. 預設日期
datepicker 預設的日期是當前的日期,如果要選擇早前的日期會需要有點慢,這時就可以先
預設一個比較早前的日期,這樣會讓使用者比較好選擇

        $(function() {
            // Datepicker
            $('#birthday').datepicker(
                    {
                        defaultDate : (new Date(new Date().getFullYear() - 20
                                + "/01/01") - new Date())
                                / (1000 * 60 * 60 * 24)
                    });
        });

修改後就會發現日期預設為 1991/1/1 日開始

4. 可選擇日期範圍
當需要設定可選擇日期不能大於或小於某個範圍時,如不能超過當前日期的後一年或前一年時
請加入以下設定

        $(function() {
            // Datepicker
            $('#birthday').datepicker(
                    {
                        yearRange : "-60:+60",
                        maxDate : '+0'
                    });
        });

5. 最大或最小可選擇日期
如果只需設定最大或最小可選擇日期

        $(function() {
            // Datepicker
            $('#birthday').datepicker(
                    {
                        maxDate : '+0',
                        minDate : '-0'
                    });
        });

修改後,如下圖:
不能選擇的日期會以反灰顯示


6.預設日期格式

        $(function() {
            // Datepicker
            $('#birthday').datepicker(
                    {
                        dateFormat : "yy-mm-dd"
                    });
        });


以上為目前我有修改所使用的程式碼部份

2 則留言:

黃梅子 提到...

datapicker修改大小~~~

我使用jquery-ui-1.10.0,
但加了font-size: 60%並沒有效果,
後來上JQUERY 討論區詢問,得到解答,
font-size: 62%!important
要加!important
-----------------------------------------------------------------------
add !important after font-size: 62%; `font-size: 62%!important; to override the font-size in the stylesheeet
-----------------------------------------------------------------------
給其他碰到相同問題的人參考...

黃梅子 提到...

datapicker修改大小~~~

我使用jquery-ui-1.10.0,
但加了font-size: 60%並沒有效果,
後來上JQUERY 討論區詢問,得到解答,
font-size: 62%!important
要加!important
-----------------------------------------------------------------------
add !important after font-size: 62%; `font-size: 62%!important; to override the font-size in the stylesheeet
-----------------------------------------------------------------------
給其他碰到相同問題的人參考...