在项目中需要使用一个日期控件来完成表单,由于项目使用了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之后我会继续补充。
- 描述: 图中就是出现的div
- 大小: 6 KB
分享到:
相关推荐
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
jquery datepicker 能跑通的小例子
jquery datepicker
ASP.NET日期控件datepicker的使用方法!
jquery 日期选择 datepicker 可以直接使用
jQuery Datepicker用到的js和CSS文件 jquery-ui.css jquery-ui-timepicker-addon.css jquery-1.7.2.js jquery-ui.min.js jquery-ui-timepicker-addon.js jquery-ui-sliderAccess.js jquery-ui-timepicker-zh-CN.js
首先下载了官方的jquery datepicker 控件 然后使用java native 命令汉化了下 使用了addone 插件, 可以带时分秒了
jquery datePicker插件jquery datePicker插件jquery datePicker插件jquery datePicker插件
jquery datepicker cn en
jquery datepicker 日期控件 已汉化,已过滤多余的js,样式,图片,下载可直接运行,支持ie,google,火狐等主流浏览器
jQuery Datepicker最新demo,包括所有语言包,很好用,也很漂亮。。
jQuery datepicker 日历组件 jQuery datepicker 日历组件
jquery datepicker today clear 扩展实现,全网惟一资源。 当时项目要用,在网上没找到现成的,找到的都是需要修改源代码的,自己最后看源码实现的扩展,没有污染源码,如果项目有需要,拿去直接用就行了。 而且日期...
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
jQuery datepicker 日历插件 使用手册
在datepicker的基础上增加了多选日期 ctrl+鼠标左键可任意点选日期、也可任意取消选中日期, shift+鼠标移动可选中鼠标滑过的所有日期,
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。
jquery日期插件-datepicker