JQuery DatePicker с кнопкой FONTAWESOME?

Question

Я строителью сайт с фундаментом, и у меня установлена иконы Fontawesome.Я пытаюсь настроить форму, где пользователь может нажать на кнопку ввода или кнопку, чтобы увидеть DatePicker jQuery.Я хотел бы использовать значок Fontawesome в кнопке.Но я не могу получить кнопку, чтобы вызвать DatePicker.

Редактировать:

Я своего рода понять это, но я до сих пор не могу понять, как реализовать значок Fontawesome.У меня это в моем 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>

.

И это в моих js:

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

.

Где я положил значок?Могу ли я как-то поставить его в аргумент buttonText?

Answer 1

Добавить

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

.

и добавить CSS:

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

.

Обратитесь за jsfiddler Здесь .

Answer 2

С помощью @ankit выше, я наконец получил эту работу.Если кто-то еще пытается сделать то же самое, вот код, который работал для меня.

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

Ваш инициализация DatePicker должна быть в документе Ready Function ...

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

.

Answer 4

Попробуйте .calButton вместо #calButton, так как у вас установить класс на кнопку не идентифицировать.

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

.