大佬教程收集整理的这篇文章主要介绍了JQuery DatePicker,如何突出显示当前输入值的日期?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy',duration: '',gotoCurrent: true,defaultDate: -1});@H_404_7@..这里是样式表: @H_404_7@
/*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; }@H_404_7@我正在使用IE7进行测试,但我在Firefox中看到了相同的行为. @H_404_7@关于这个问题的任何想法?
@H_404_7@例如,IE6似乎忽略周末天的背景颜色.
@H_404_7@当前所选日期和今天日期的背景颜色均通过CSS控制. last datepicker的默认CSS是main flora style sheet,虽然我看到本周在jQuery网站上有一个new version/stylesheet of the datepicker(我还没有正确阅读,我相信它可能是一个新版本).@H_404_7@样式表中要更改背景颜色的类的相关默认名称是 –
@H_404_7@
/* current input value BACkground color */ .ui-datepicker-current-day { BACkground: #83C948 } /* today's BACkground color */ .ui-datepicker-today { BACkground: #83C948 }@H_404_7@编辑: @H_404_7@如果你使用的是old Datepicker as is,那么这些是插件js文件中的相关行 –
@H_404_7@
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)@H_404_7@因此,你要么
@H_404_7@>在CSS中需要这些CSS类
样式表来突出今天和
目前选择的日期
@H_404_7@>您需要更改名称
插件js文件并使用相同的
CSS中类的名称
样式表
@H_404_7@编辑2:
@H_404_7@看起来new datepicker使用稍微不同的CSS来为当前选择的日期和今天的日期着色.虽然之前的版本设置了table cell(td)元素的样式,但新版本在单元格内设置了anchor(a)元素的样式.@H_404_7@在Firefox 3中使用Firebug(强烈推荐),今天用于着色的CSS似乎是
@H_404_7@
.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; }@H_404_7@并且对于输入中的当前所选日期,它是 @H_404_7@
.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; }@H_404_7@这些都来自jQuery UI CSS Framework
以上是大佬教程为你收集整理的JQuery DatePicker,如何突出显示当前输入值的日期?全部内容,希望文章能够帮你解决JQuery DatePicker,如何突出显示当前输入值的日期?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。