JQuery UI Datepicker 不包括图标答案

【问题标题】：JQuery UI Datpicker excluding iconsJQuery UI Datepicker 不包括图标
【发布时间】：2017-07-26 06:40:05
【问题描述】：

我正在开发一个应用程序并且正在使用 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。

当我最初打开日期选择器时，这很好用。但是，当我单击 Prev 按钮时，图标再次出现。即使切换月份视图，我如何才能坚持 Next/Prev。

【问题讨论】：

请向我们提供您的日期选择器的工作样本，以便我们检查解决方案。

标签： javascript jquery html css datepicker

【解决方案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(){
			$('.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();

    });
});

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

【讨论】：

谢谢，它工作正常。但是有一个问题。我正在使用 minDate 和 maxDate。那么当月之间无法导航的时候，next/prev 可以被压低吗？

【解决方案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%;
}

【讨论】：