Question

我已使用以下内容更改了下一个按钮的图像：

.ui-datepicker .ui-datepicker-next .ui-icon {
    background: url(next.png);
    width: 50px;
    height: 50px;
}

如您所见，新图像尺寸为50x50，旧图像尺寸为16x16。现在我不知道如何正确定位新图像，因为现在它看起来像this - jsfiddle。

Answer 1

您可以在自己的css文件中修改或覆盖：.ui-datepicker .ui-datepicker-prev span和.ui-datepicker .ui-datepicker-next span。

这样的事情应该可以胜任：

left: 0;
margin-left: 0;
top: 0;
margin-top: 0;

Answer 2

将css更改为此

供参考检查this

.ui-datepicker-next span {
    background-image: url(http://i.imgur.com/DyQTbOA.png); !important;

}
.ui-datepicker-prev span {
    background-image: url(http://i.imgur.com/DyQTbOA.png); !important;

}

希望这有帮助

Answer 3

我的建议是：

更改下一个和上一个图标的顶部和左侧位置
调整标题高度

摘录：

$(function(){
    
    $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });
    
});

.ui-datepicker {
  font-size: 25px;
}
.ui-datepicker .ui-datepicker-next .ui-icon{
  background: url(http://i.imgur.com/DyQTbOA.png);
  width: 50px;
  height: 50px;
  top: 6px;
  left: -10px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
  background: url(http://i.imgur.com/hBFw2TW.png);
  width: 50px;
  height: 50px;
  top: 6px;
  left: 6px;
}
.ui-datepicker div.ui-datepicker-title {
  line-height: 2.4em; !important;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<p>Date: <input type="text" id="datepicker"></p>

Answer 4

我想，你应该只调整你的新形象。

另一个解决方案是;使用位置，如您在代码段中所示，将位置绝对设置为您的图像。（不调整图像大小）

$(function(){
    
    $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });
    
});

.ui-datepicker {
  font-size: 25px !important;
}
.ui-datepicker .ui-datepicker-next .ui-icon{
    background: url(http://i.imgur.com/DyQTbOA.png);
    width: 50px;
    height: 50px;
    left:0px;
    top:9px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
    background: url(http://i.imgur.com/hBFw2TW.png);
    width: 50px;
    height: 50px;
    position:absolute;
    left:12px;
    top:9px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="datepicker"></div>

更改datepicker插件中next和prev按钮的位置

4 个答案: