Datepicker de jQuery avec FontAwesome Bouton?

Question

Je suis en train de construire un site avec la base, et j'ai l'FontAwesome icônes installé.Je suis en train de configurer un formulaire où l'utilisateur peut cliquer sur une entrée ou un bouton pour voir le datepicker de jQuery.J'aimerais être en mesure d'utiliser le FontAwesome icône dans le bouton.Mais je n'arrive pas à obtenir le bouton pour déclencher le datepicker.

EDIT:

J'ai eu de travail, mais je n'arrive toujours pas à comprendre comment mettre en œuvre la FontAwesome icône.J'ai ceci dans mon code HTML:

  <div class="row">
    <div class="large-3 columns">
        <label>Departure Date</label>
        <div class="row date collapse">
        <div class="small-9 columns"><input class="small-9 columns" placeholder="Choose Date" type="text" name="date" id="date"></div>
        </div>
    </div>
  </div>

Et c'est à mon JS:

$(function() {
    $( "#date" ).datepicker({
      showOn: "both", 
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonText: "THIS IS A BUTTON",
      buttonImageOnly: true
    });
  });

Où dois-je placer l'icône?Je peux en quelque sorte de la mettre dans le buttonText argument?

Answer 1

Ajouter

buttonText: "<i class='fa fa-calendar'></i>"

et d'ajouter CSS:

.ui-datepicker-trigger{
    border:none;
    background:none;
 }

reportez-vous JSFiddler Ici.

Answer 2

Avec l'aide de @Ankit ci-dessus, j'ai finalement obtenu ce travail.Dans le cas où quelqu'un d'autre est en train de faire la même chose, voici le code qui a fonctionné pour moi.

HTML

  <div class="row">
    <div class="large-3 columns">
        <label>Departure Date</label>
        <div class="row date collapse">
        <div class="small-9 columns"><input class="small-9 columns" placeholder="Choose Date" type="text" name="date" id="departureDate"></div>
        </div>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
        <label>Departure Date</label>
        <div class="row date collapse">
        <div class="small-9 columns"><input class="small-9 columns" placeholder="Choose Date" type="text" name="date" id="returnDate"></div>
        </div>
    </div>
  </div>

JavaScript

$(function() {
    $( "#departureDate" ).datepicker({
      showOn: "both", 
      buttonText: "<i class='fa fa-calendar'></i>"
    });
  });

$(function() {
    $( "#returnDate" ).datepicker({
      showOn: "both", 
      buttonText: "THIS IS A BUTTON!",
    });
  });

CSS

/* Datepicker Styles */

.ui-datepicker-trigger {
    border:none;
    background:none;
    float: right;
}

input.small-9.columns.hasDatepicker {
    float: left;
    width: 73%;
}

button.ui-datepicker-trigger {
    background: #FFF;
    color: #333;
    padding: 9px 14px;
}

button.ui-datepicker-trigger:hover {
    background: #CCC;
}

button.ui-datepicker-trigger i.fa.icon-calendar {
    color: black;
}

Answer 3

Votre datepicker initialisation doit être dans le document de prêt de la fonction...

$(function() {
    $( "#date" ).datepicker();
    $( "#calButton" ).datepicker({
      showOn: "both", 
    });
});

Answer 4

Essayez .calButton au lieu de #calButton depuis que vous avez mis de la classe sur le bouton id pas.

$(function() {
    $( ".calButton" ).datepicker({
        showOn: "both", 
    });
});