JQuery日期选择器,如何突出显示当前输入值日期?
我正在为jquery使用datepicker控件,除了我不能让它突出显示当前选择的输入值(或者当前日期)之外,一切都很好。即使我的文本输入中有有效的日期值,并且可以让日期选择器返回正确的月/年,但我无法让它在日历上突出显示该日期 这是我的密码:JQuery日期选择器,如何突出显示当前输入值日期?,jquery,css,jquery-plugins,datepicker,Jquery,Css,Jquery Plugins,Datepicker,我正在为jquery使用datepicker控件,除了我不能让它突出显示当前选择的输入值(或者当前日期)之外,一切都很好。即使我的文本输入中有有效的日期值,并且可以让日期选择器返回正确的月/年,但我无法让它在日历上突出显示该日期 这是我的密码: $('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1}); …以下是样式表: /*datepick
$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1});
…以下是样式表:
/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
font-family: Verdana, Arial, sans-serif;
background: #ffffff url(images/ffffff_40x100_textures_01_flat_0.png) 0 0 repeat-x;
font-size: 0.80em;
border: 4px solid #dddddd;
width: 15.5em;
padding: 2.5em .5em .5em .5em;
position: relative;
}
.ui-datepicker-div, #ui-datepicker-div {
z-index: 9999; /*must have*/
display: none;
}
.ui-datepicker-inline {
float: left;
display: block;
}
.ui-datepicker-control {
display: none;
}
.ui-datepicker-current {
display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
position: absolute;
left: .5em;
top: .5em;
background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next {
left: 14.6em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next a, .ui-datepicker-prev a {
text-indent: -999999px;
width: 1.3em;
height: 1.4em;
display: block;
font-size: 1em;
background: url(images/888888_7x7_arrow_left.gif) 50% 50% no-repeat;
border: 1px solid #d3d3d3;
cursor: pointer;
}
.ui-datepicker-next a {
background: url(images/888888_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:hover {
background: url(images/454545_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:hover {
background: url(images/454545_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:active {
background: url(images/222222_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:active {
background: url(images/222222_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-header select {
border: 1px solid #d3d3d3;
color: #555555;
background: #e6e6e6;
font-size: 1em;
line-height: 1.4em;
position: absolute;
top: .5em;
margin: 0 !important;
}
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover {
background: #dadada;
}
.ui-datepicker-header select.ui-datepicker-new-month {
width: 7em;
left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
width: 5em;
left: 9.4em;
}
table.ui-datepicker {
width: 15.5em;
text-align: right;
}
table.ui-datepicker td a {
padding: .1em .3em .1em 0;
display: block;
color: #555555;
background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
cursor: pointer;
border: 1px solid #ffffff;
}
table.ui-datepicker td a:hover {
border: 1px solid #999999;
color: #212121;
background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
table.ui-datepicker td a:active {
border: 1px solid #dddddd;
color: #222222;
background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
}
table.ui-datepicker .ui-datepicker-title-row td {
padding: .3em 0;
text-align: center;
font-size: .9em;
color: #222222;
text-transform: uppercase;
}
table.ui-datepicker .ui-datepicker-title-row td a {
color: #222222;
}
.ui-datepicker-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -4px;
left: -4px;
width: 193px;
height: 200px;
}
我正在使用IE7进行测试,但我在Firefox中看到了相同的行为
关于这个问题有什么想法吗?首先,您在哪个浏览器中查看日期选择器?我注意到,与后来的浏览器(Firefox3、Chrome、IE7)相比,IE6中datepicker中的一些日期/部分颜色看起来有所不同 例如,IE6似乎忽略了周末的背景色 当前选定日期和今天日期的背景颜色都通过CSS控制。的默认CSS是,尽管我看到本周网站上有一个(我还没有进行适当的阅读,我相信它可能是一个新版本) 样式表中需要更改背景颜色的类的相关默认名称是-
/* current input value background color */
.ui-datepicker-current-day
{
background: #83C948
}
/* today's background color */
.ui-datepicker-today
{
background: #83C948
}
编辑:
如果您使用的是,那么这些是插件js文件中的相关行-
this._currentClass = 'ui-datepicker-current-day';
// The name of the current day marker class
(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + ...
// highlight today (if different)
因此,你要么
- 在CSS中需要这些CSS类吗 突出显示今天和未来的样式表 当前选定日期
- 您需要更改中的名称 插件js文件,并使用相同的 CSS中类的名称 样式表
.ui-state-highlight, .ui-widget-content .ui-state-highlight
{
background:#FFE45C url(../images/?new=ffe45c&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|75) repeat-x scroll 50% top;
border:1px solid #FED22F;
color:#363636;
}
对于输入中的当前选定日期,它是
.ui-state-active, .ui-widget-content .ui-state-active
{
background:#FFFFFF url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) repeat-x scroll 50% 50%;
border:1px solid #FBD850;
color:#EB8F00;
font-weight:bold;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
这两者都来自于这是最好的解决方案: 输入字段,选择周
你好,罗斯。谢谢你的帮助。我已经查看了我的datapicker样式表,但似乎没有您列出的类选择器?我试图将它们添加到css文件中,但运气不好。我相信我使用的是最新的datepicker,控件的其他部分似乎设计正确。使用Firefox中的Firebug来尝试查看当前日期的样式。Russ的回答是正确的,我通过查看Firebug找到了这两个类名,并且能够突出显示当前日期和所选日期。感谢所有帮助。我已经设法解决了这个问题,正如您所说,锚元素的样式现在似乎已经设置好了,而不是表单元格。奇怪的是,您原来的元素类名对于我的datepicker来说是正确的-这意味着它是某种混合的,但是,嘿,它工作了!)