好用的jQuery外掛datepicker(三)

2008-11-24

7170
0
JavaScript

到目前為止datepicker做的都是英文介面

老實說這樣對於部分使用者來說是"不順眼"的

為什麼不能直接顯示中文讓我選呢？

到目前為止datepicker做的都是英文介面

老實說這樣對於部分使用者來說是"不順眼"的

為什麼不能直接顯示中文讓我選呢？

先前cloudio還很呆的跑到datepicker.js裡面去把所有的英文自行翻譯成中文><

不過也是因為那時還沒有出語言包啦

現在下載的datepicker都有附上多國語言囉

您只要解開datepicker的zip檔就可以在ui\i18n的目錄裡看到這些控制輸出語言的js檔案了

引用的方法也很簡單

只要在使用datepicker的頁面在多引用該語言的js檔案就好了

類似這樣：

把你要使用的語言套用就好囉

再來或許您會有需求是讓datepicker的快顯不是focus到該textbox後出現

而是旁邊有一個button來按下

那您可以寫成


jQuery("#Text1").datepicker({
    //顯示為button
    showOn: 'button',
    //button的text
    buttonText: '選擇'
});

這樣就可以改變為

很明顯的發現button的width放不下我們設定的字

而且cloudio在datepicker.js裡也找不到地方設定@@

所以只好打開Firebug去看看這個button的設定囉

然後cloudio發現他的class是ui-datepicker-trigger所以只好在下一段

jQuery(".ui-datepicker-trigger").css({ "width": "60px" });

把他的寬度調到60px好讓選擇兩個字可以顯示在button而不會超出來被截斷

最後如果您想要顯示成這樣呢：

就這樣寫吧


jQuery("#Text1").datepicker({
    showOn: "button",
    buttonImageOnly: true,
    buttonImage: "Images/icon/icon_calendar.gif",
    dataformat: "yyMMdd"
});
jQuery(".ui-datepicker-trigger").css({ "cursor": "pointer" });

最後一段是因為這個圖片當您的滑鼠一上去並不會變成"手"的形狀

所以cloudio只好在做一次小手腳囉...

最後如果您還有其他地方需要修改的話

也可以直接打開datepicker.js來研究this._defaults這個object裡面的欄位

來改變囉:)

回首頁