Replace jQuery datepicker prev and next icons with FontAwesome icons

问题

I'm using jQuery datepicker and I would like to be able to replace its prev and next icons with FontAwesome for better scalability and prettier UI. Has anyone managed to find a way to do it?

回答1:

We can overwrite the icons using CSS, since the plugin doesn't allow it. In the following snippet, we hide the regular buttons, and add a :before pseudo element with the Font Awesome Icon.

Please notice you have to use the icon's codepoint (i.e. \f100) and not its class name (i.e. 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

回答2:

It is quite possible to modify the icons directly in the original jQuery UI code, open the file jquery-ui.min.js (you must work directly on the file without CDN of course!) and modify the following lines :

in jquery-ui.min.js

1 - Find :

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

Replace with :

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

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

Replace with :

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

I wrote an article on this method with a link to an example at the bottom of the page. -> Article here : 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/

Hoping to help a little...

来源：https://stackoverflow.com/questions/47460581/replace-jquery-datepicker-prev-and-next-icons-with-fontawesome-icons

标签

css

font-awesome

jquery-ui-datepicker