更改在日期選擇器插件

的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

更改在日期選擇器插件

回答

相關問題