مسج منتقي التاريخ مع زر رائع?

Question

أنا بناء موقع مع الأساس ، ولدي الرموز فونتاوسوم تثبيت.أحاول إعداد نموذج حيث يمكن للمستخدم النقر على إدخال أو زر لرؤية مسج ديتيبيكر.أود أن تكون قادرة على استخدام رمز فونتاوسوم في الزر.ولكن لا يمكنني الحصول على الزر لتشغيل منتقي التاريخ.

تحرير:

أنا نوع من حصلت عليه العمل ، ولكن ما زلت لا يمكن معرفة كيفية تنفيذ رمز فونتاوسوم.لدي هذا في أتش تي أم أل:

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

وهذا في بلدي شبيبة:

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

أضف

giveacodicetagpre.

وإضافة CSS:

giveacodicetagpre.

الرجوع jsfiddler هنا .

Answer 2

بمساعدة Jankit أعلاه، أخيرا حصلت على هذا العمل.في حالة محاولة أي شخص آخر أن يفعل الشيء نفسه، إليك الرمز الذي عمل لي.

html

giveacodicetagpre.

جافا سكريبت

giveacodicetagpre.

css

giveacodicetagpre.

Answer 3

يجب أن يكون تهيئة DatePicker في الوظيفة الجاهزة المستند ...

giveacodicetagpre.

Answer 4

حاول .calButton بدلا من #calButton منذ قمت بتعيين فئة على زر لا معرف.

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