Question

我正在使用jQuery datepicker，我希望能够使用FontAwesome替换其prev和next图标，以获得更好的可伸缩性和更漂亮的UI。有没有人设法找到办法呢？

Answer 1

我们可以使用CSS覆盖图标，因为插件不允许。在下面的代码片段中，我们隐藏常规按钮，并使用Font Awesome Icon添加:before伪元素。

请注意，您必须使用图标的代码点（即\f100），而不是其类名（即fa-angle-double-left）。

＆＃13;

$(function() {
  $("#datepicker").datepicker();
});

＆＃13;

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-prev:before {
  content: "\f100";
}

.ui-datepicker-next:before {
  content: "\f101";
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  Date:
  <input type="text" id="datepicker">
</p>

＆＃13;

JSFiddle

Answer 2

完全有可能直接在原始jQuery UI代码中修改图标，打开文件jquery-ui.min.js （当然，您必须直接在没有CDN的情况下处理文件！）并修改以下几行：

在jquery-ui.min.js中

1-查找：

<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>

替换为：

<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>

2-查找：

<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>

替换为：

<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='fa fa-angle-right' aria-hidden='true'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>

我写了一篇有关此方法的文章，并在页面底部提供了一个示例的链接。 ->此处的文章：https://sns.pm/Article/Utiliser-les-icones-de-Font-Awesome-avec-Datepicker-jQuery-UI

-> sampl：https://sns.pm/DEMOS-ARTICLES/Article-DEMO-jQuery-ui-font-awsome/

希望能有所帮助...

用FontAwesome图标替换jQuery datepicker prev和next图标

2 个答案: