アイコンを除くJQuery UI Datpicker

Question

私はアプリケーションで作業しており、jQuery UI Datepickerウィジェットを使用しています。しかし、私はdatepickerのデフォルトのアイコンを使いたくないので、アイコンクラスを削除したときに表示されるアイコンの代わりにNextとPrevのテキストが必要になります。

私はこのようなコードで、現在よ：日付ピッカーは、日付フィールドのIDです

$("#datePicker").on("click", function(){ 
    $('.ui-icon.ui-icon-circle-triangle-w').removeClass('ui-icon ui-icon-circle-triangle-w'); 
}) 

。

これは、最初にdatepickerを開いたときに正常に動作します。しかし、前のボタンをクリックすると、アイコンが再び表示されます。月表示を切り替える場合でも、どのようにNext/Prevで保存することができますか。

Answer 1

ここではそれを修正する必要があるソリューションhttp://jsfiddle.net/8w8v9/3308/

$(function(){ 
 
    
 
    $('#thedate').datepicker({ 
 
     dateFormat: 'dd-mm-yy', 
 
     altField: '#thealtdate', 
 
     altFormat: 'yy-mm-dd', 
 
     prevText: "Prev", 
 
     nextText: "Next" 
 
    }); 
 
    
 
    replaceIcon = function(){ 
 
\t \t \t $('.ui-icon.ui-icon-circle-triangle-w').parent().removeAttr('class').attr('class', 'updatedClassLeft'); 
 
     $('.ui-icon.ui-icon-circle-triangle-w').removeAttr('class'); 
 
     
 
     $('.ui-icon.ui-icon-circle-triangle-e').parent().removeAttr('class').attr('class', 'updatedClassRight'); 
 
     $('.ui-icon.ui-icon-circle-triangle-e').removeAttr('class'); 
 
     
 
    } 
 
    
 
    
 
    $("#thedate").on("click", function(){ 
 
    \t replaceIcon(); 
 
    \t \t }); 
 
    
 
    $(document).on('click','.updatedClassLeft, .updatedClassRight',function(){ 
 
    \t replaceIcon(); 
 

 
    }); 
 
});

.updatedClassLeft{ 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 0px; 
 
    cursor: pointer; 
 
} 
 
.updatedClassRight{ 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 2px; 
 
    cursor: pointer; 
 
}

<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 

 
Shown Field : <input id="thedate" type="text" /><br /> 
 
Hidden Field : <input id="thealtdate" type="text" /><br /> 
 
<input id="thesubmit" type="button" value="Submit" />

Answer 2

私はちょうどあなたのCSSファイルで、より具体的なCSSルールを追加し、一緒に行きます。出発点：

body .ui-datepicker .ui-datepicker-prev, 
body .ui-datepicker .ui-datepicker-next { 
    width: 2.6em; 
} 

body .ui-datepicker .ui-datepicker-prev span.ui-icon.ui-icon-circle-triangle-w, 
body .ui-datepicker .ui-datepicker-next span.ui-icon.ui-icon-circle-triangle-e { 
    background: none; 
    overflow: visible; 
    text-indent: 0; 
    width: initial; 
    left: 30%; 
}