更改在日期选择器插件

的Next和Prev按钮的位置我已经改变了下一个按钮的图像用：更改在日期选择器插件

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

正如你看到新的图像尺寸为50×50，和旧的是16×16。现在我不知道如何正确定位新图像，因为现在看起来像this - jsfiddle。

来源

2016-11-11 Bonana

能否请您创建一个小提琴？ – Cheese

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

这样的事情应该做的工作：

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

来源

2016-11-11 18:27:41 Vincent

更改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; 

}

希望这有助于

来源

2016-11-11 18:30:57 Geeky

我的建议是：

变化的未来和prev图标
调整标题高度顶部和左侧位置

的片段：

$(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>

来源

2016-11-11 18:34:58 gaetanoM

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

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

$(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>

来源

2016-11-11 18:40:26 oguzhancerit

更改在日期选择器插件

回答

相关问题