Logo SNS - Web et Informatique

SNS - Web et Informatique

Lundi 18 Juin 2018
06 25 23 34 56
12150, Sévérac-le-Château
 08h00/23h00 - 7j/7
Être rappelé
Utiliser les icônes de Font Awesome avec Datepicker | jQuery UI

Utiliser les icônes de Font Awesome avec Datepicker jQuery UI

Publié le .

Vous désirez utiliser les icônes de Font Awsome avec le Datepicker de jQuery UI ? Et bien c'est possible, même si comme moi vous utilisez seulement jQuery ui sans CSS. Ce framework est publié sous licence MIT, vous pouvez donc le modifier à votre guise ... C'est ce que nous allons faire !
Pour cela vous allez devoir "customiser" le fichier "jquery-ui.min.js".
Cela implique que vous utilisiez jQuery UI depuis vos propres ressources sans CDN.
Ouvrez le fichier jquery-ui.min.js avec votre éditeur de code favori et faites les modifications suivantes :

// Note : le code suivant est non-indenté car les modifications doivent être faites "in-line".
// J'ai créé un fichier CUSTOM.jquery-ui.min.js pour faire les modifications

// Trouvez (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> 

// Remplacez par (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>

// Et trouvez (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>

// Remplacez par (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>

Vous pouvez utiliser n'importe quel icône, il vous suffit de modifier la classe du span à l'intérieur de la balise a
Voici un exemple de code réalisé avec l'aide de la documentation
ICI https://jqueryui.com/datepicker/ (Cliquez sur "view source")
Voir la démonstration en ligne


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery-ui with Font-Awsome icons</title>

<!-- include cdn font-awsome CSS or your -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- (option) include CSS jQuery or custom your CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- include your custom jQuery-ui -->
<!-- customize jquery-ui.min.js or rename it -->
<script src="CUSTOM.jquery-ui.min.js"></script>

<script>
$(function(){
// for disable text "prev./next"
$( "#datepicker" ).datepicker({
prevText: "",
nextText: ""
});

});
</script>

<!-- a little bit of CSS -->
<style type="text/css">
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
text-align: center;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
position: initial;
margin-left: 0px;
margin-top: -1px;
font-size: 30px;
}
</style>

</head>
<body>

<p>Now, you have a Datepicker with Font-awsome icon !</p>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
SNS - Web & Informatique | www.sns.pm | 2013 - 2018