【前端】日期插件datepicker的上月、下月按钮图标的问题

想要达成的效果是,上月、下月按钮效果如图1所示,鼠标滑过日期的上月、下月按钮时显示上月、下月。
【前端】日期插件datepicker的上月、下月按钮图标的问题
图1
【前端】日期插件datepicker的上月、下月按钮图标的问题
图2
问题是,如图1,图2,鼠标滑过日期的上月、下月按钮时而显示上月、下月,时而显示<i class="fa fa-chevron-left" title="上月"></i>这句代码,我知道这是由于图中圈画出的<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="<i class=&quot;fa fa-chevron-left&quot; title=&quot;上月&quot;></i>">title造成的
代码如下:

$('#birthday,#enroll-birth-edit').datepicker({

dateFormat : 'yy-mm-dd',

defaultDate : '1998-1-1',

prevText : '<i class="fa fa-chevron-left" title="上月"></i>',

nextText : '<i class="fa fa-chevron-right" title="下月"></i>'

});

了解到,prevText:"上一月", //鼠标放在翻月按钮上显示“上一月”,将代码改为如下:

$('#birthday,#enroll-birth-edit').datepicker({

dateFormat : 'yy-mm-dd',

defaultDate : '1998-1-1',

prevText : "上月",

nextText :"下月"

});

但是,效果如图3所示,按钮小箭头 > 没有了、、、、
【前端】日期插件datepicker的上月、下月按钮图标的问题

想请教,怎么解决这个问题?达成想要的效果。

回答

jQuery UIdatepicker 預設的圖標是用 cssbackground-image 來顯示,prevTextnextText 只是拿來設定提示用。

【前端】日期插件datepicker的上月、下月按钮图标的问题

所以最快的方法就是直接覆蓋掉原始使用的圖標,但是這就必須用到圖片:

.ui-widget-header .ui-icon {

background-image: url(新圖標) !important

}

$('#birthday,#enroll-birth-edit').datepicker({

dateFormat : 'yy-mm-dd',

defaultDate : '1998-1-1',

prevText : "上月",

nextText :"下月"

});

如果不想用圖片一定要用 font-awesome 之類的 icon 的話,剛研究了下釋出了這個方法試出了這個方法,挺暴力的,不過因為我看了下源碼,並沒有任何可以方便更改的接口,是直接字符串連接寫死的,所以只能靠直接替換的方式了:

jsFiddle

以上是 【前端】日期插件datepicker的上月、下月按钮图标的问题 的全部内容, 来源链接: utcz.com/a/79216.html

回到顶部