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

Question

我正在使用jQuery datepicker，我希望能够用FontAwesome替换它的prev和next图标，以获得更好的可伸缩性和更漂亮的用户界面。有没有人设法找到办法做到这一点？

Answer 1

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

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

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

.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";
}

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

JSFiddle

Answer 2

很可能直接在原始的jQuery UI代码中修改图标，打开文件jquery-ui.min.js（你必须直接在没有CDN的文件上工作！）并修改以下行：

J jえーーー。闵。 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

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

希望能有所帮助......