Question

我正在处理应用程序并使用jQuery UI Datepicker小部件。但我不想使用datepicker中的默认图标，并希望使用Next和Prev文本代替删除图标类时可见的图标。

我目前正在使用这样的代码：

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

其中datePicker是日期字段的id。

我最初打开datepicker时工作正常。但是，当我单击“上一个”按钮时，图标会再次出现。即使切换月视图，我怎样才能坚持使用Next / Prev。

Answer 1

您可以使用解决方案http://jsfiddle.net/8w8v9/3308/

＆＃13;

$(function(){
    
    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd',
        prevText: "Prev",
        nextText: "Next"
    });
    
    replaceIcon = function(){
			$('.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(){
    	replaceIcon();
 		});
    
    $(document).on('click','.updatedClassLeft, .updatedClassRight',function(){
    	replaceIcon();

    });
});

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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%;
}

JQuery UI Datpicker不包括图标

2 个答案: