使用JQuery DatePicker屏幕下方会出现一个div情况的处理 DatepickerdivjqueryUI

在项目中需要使用一个日期控件来完成表单，由于项目使用了JQuery，所以干脆就是使用JQuery自带的DatePicker了。

在自定义DatePicker的Style过程中会发现屏幕的下方会出现一条不知名的线(上图不是很方便)。我查看了一下源代码，代码是这样的：
<div id="ui-datepicker-div" class="ui-datepicker ui-widget

ui-widget-content ui-helper-clearfix ui-corner-all">

</div>

个人觉得应该是datepicker实现过程中必须的东西，但是为了美观，我们也不能让他一直在页面上，经过我的调查，我找到了两种方法。一种是我在CSDN上找到的，一种是我自己发现的。

先说第一种：

在jquery的onready方法中加上 $("#ui-datepicker-div").hide(); 加载时隐藏下就行了！

(感谢CSDN这位朋友，他的ID为chuxu000)

这种方法方法一开始我没有明白，但是经过我几次尝试，成功的起到了效果，我写一个demo，这样更直观一些：

 $(document).ready(function(){

$( "#Date" ).datepicker(); 

$("#ui-datepicker-div").hide();

})

这种方法的确是有效果的，但是对于一个项目来说，如果项目中有许多地方用到Datepicker的话，那么就会变的很麻烦，也不利于维护。可以说是"治标不治本"。

经过我的思考，$("#ui-datepicker-div").hide();这段代码无非是想这个div在页面加载的时候不显示，所以我就想到了在css的属性中有一个Display属性，所有就尝试了一下，最后成功了解决了这个问题，这样我们便不用一个页面一个页面的去修改我们的Datepicker控件了。下面是我修改css的文件和位置：

css文件的名字一般叫做jquery.ui.datepicker.css。总是就是存放datepicker的css，名字不必拘泥。下面说需要修改的那段位置：

.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: 0.8em; display: none;}

在这段css中加入我注红的地方，也就是display: none;这段代码。经过测试，bug消失了。

由于小弟也是对css样式表不是很了解，解决这个问题也是通过经验来判断，具体原因，在我学习完css之后我会继续补充。