如何修改並自定義jquery ui datepicker的寬度

June 27 2014更新:如今才發現修改jquery ui datepicker控件寬度的最簡單方法就是直接在在外面添加css代碼就好,而不是去修改jquery ui自帶的css文件。若是你想要控制datepicker的寬度,那麼其實只須要這一行css就完事了,代碼以下:css

div.ui-datepicker{width:91%;}

注意:你徹底能夠在div.ui-datepicker{}裏面寫其餘你想要的改變datepicker樣式的css代碼。
jquery


公司的Manager或者負責測試的同事,給我在平臺上下發了一個任務,就是當使用when use the mobile to access the desktop version ,the calander position whill drop into the next line.我當時就想,爲何要用移動端去訪問訪問針對PC端的頁面呢?這不是自找麻煩嗎?問題截圖以下:chrome

153855615.jpg

所謂,人在江湖,身不禁己。當時,我本身馬上百度/谷歌去了(缺少經驗的菜鳥都這樣子呀!),但願能夠經過大海撈針的方法找到別人也遇到一樣的問題,最後很惋惜我根本找不到現成的解決方案。我只能根據本身的判斷,這確定是由於寬度不夠的緣由將calander drop into the next line。選擇使用chrome的F12調試功能來進155953714.jpg行頁面調試了,調試時,發現jquery ui渲染出來的datepicker有一個寬度值34em.如圖:在這裏說明一下,我是使用了ADB Plugin for remote debugging Chrome on Android來對手機端進行的調試。ide

修改的文件jquery-ui.css(版本:jQuery UI - v1.8.24 - 2012-09-28) Line 145:註銷的爲原代碼,後面的是本身的.工具


/*.ui-datepicker.ui-datepicker-multi { width:auto; }*/
/*Modified by james 2013-11-06 15:17*/
.ui-datepicker.ui-datepicker-multi { width:32em !important; }

不知道爲何原css的width:auto爲何沒有生效。測試

注意:修改jquery ui這些插件的css,最後直接使用chrome,firefox的調試工具進行一邊調試,一邊修改css屬性值。在google chrome下面,修改css後,會直接生效,這樣子你就可以知道修改那個纔是正確的,很是方便好用。ui

相關文章
相關標籤/搜索