如何修改并自定义jquery ui datepicker的寬度

June 27 2014更新:如今才发现修改jquery ui datepicker控件宽度的最简单方法就是直接在在外面添加css代码就好，而不是去修改jquery ui自带的css文件。若是你想要控制datepicker的宽度，那么其实只须要这一行css就完事了，代码以下：

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

注意：你彻底能够在div.ui-datepicker{}里面写其余你想要的改变datepicker样式的css代码。

公司的Manager或者负责测试的同事，给我在平台上下发了一个任务，就是当使用when use the mobile to access the desktop version ,the calander position whill drop into the next line.我当时就想，为何要用移动端去访问访问针对PC端的页面呢？这不是自找麻烦吗？问题截图以下：

所谓，人在江湖，身不禁己。当时，我本身马上百度/谷歌去了(缺少经验的菜鸟都这样子呀！)，但愿能够经过大海捞针的方法找到别人也遇到一样的问题，最后很惋惜我根本找不到现成的解决方案。我只能根据本身的判断，这确定是由于宽度不够的缘由将calander drop into the next line。选择使用chrome的F12调试功能来进行页面调试了，调试时，发现jquery ui渲染出来的datepicker有一个宽度值34em.如图：在这里说明一下，我是使用了ADB Plugin for remote debugging Chrome on Android来对手机端进行的调试。

修改的文件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后，会直接生效，这样子你就可以知道修改那个才是正确的，很是方便好用。