fontAwesomeの作成方法入力フィールドの最後にあるアイコンもクリック可能

Question

jQueryの日付ピッカー付きの入力フィールドがあります。入力フィールドをクリックするとカレンダーが表示されます。私はまた：の後ろにカレンダーのフォント驚くばかりのアイコンを挿入しました。その部分をクリック可能にしてjQueryカレンダーを起動するにはどうすればよいですか？私は白でなければならないので、入力フィールドの背景を透明にすることはできません。

$(function() { 
 
    $("#dateOfBirth").datepicker({ 
 
    numberOfMonths: 2, 
 
    dateFormat: 'dd-mm-yy', 
 
    maxDate: '0', 
 
    minDate: '-18M' 
 
    }); 
 
});

.addingCalendarIcon:after{ 
 
    content: "\f073"; 
 
    color:black; 
 
} 
 

 
.addingCalendar:after{ 
 
    position:relative; 
 
    right:260px; 
 
    top:5px; 
 
    float:right; 
 
    font-family: FontAwesome; 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div> 
 
    <label>Date of Birth : </label> 
 
    <div> 
 
    <span class="addingCalendar addingCalendarIcon"> 
 
     <input type="search" placeholder="dd-mm-yyyy" name="dateOfBirth" onchange="dateOfBirthCheck();adding28Days();makingSixWeekDate();making40dayDate();" id="dateOfBirth" readonly="true"/> 
 
    </span> 
 
    </div> 
 
</div>

Answer 1

：

$(".addingCalendar").datepicker({ 
     numberOfMonths: 2, 
     dateFormat: 'dd-mm-yy', 
     maxDate: '0', 
     minDate: '-18M' 

    }); 

はフィドルを作成しました。

$(function() { 
    $("#dateOfBirth").datepicker({ 
     numberOfMonths: 2, 
     dateFormat: 'dd-mm-yy', 
     maxDate: '0', 
     minDate: '-18M' 
    }); 
    $('.addingCalendar').on("click", function(e){ 
    console.log("clicked"); 
     $('#dateOfBirth').focus(); 
    }); 
    }); 

JSFiddle Demo

Answer 2

スニペット以下のようなようなものを試してみてください。 afterにフォントワームアイコンを追加する代わりに、jqueryを使用してclickイベントを書き込みます。

$('#calendarIcon').click(function() { 
 
    alert('calendar icon clicked'); 
 
});

#calendarIcon { 
 
    position: relative; 
 
    z-index: 1; 
 
    left: -25px; 
 
    top: 1px; 
 
    color: #7B7B7B; 
 
    cursor: pointer; 
 
    width: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<input id="calendar" type="text" placeholder="DD/MM/YYYY" /> 
 
<i id="calendarIcon" class="fa fa-calendar"></i>

Answer 3

そのない可能性彼らはDOMの一部ではないとして、疑似要素がクリック可能にします。あなたがあなたのケースで何ができるか

は、入力フィールド（.addingCalendar）を含む要素は、日付ピッカーの代わりに、（#dateOfBirth）をトリガしますです。あなただけのカレンダーアイコンをクリックしたときに入力要素が集中することができますhttps://jsfiddle.net/zg45anab/

Answer 4

利用別々のアイコンの要素と親ラッパーと入力し、アイコンの要素をラップ

HTML

<div> 
     <label>Date of Birth : </label> 
     <div class="input_wrapper"> 
      <input type="search" placeholder="dd-mm-yyyy" name="dateOfBirth" onchange="dateOfBirthCheck();adding28Days();makingSixWeekDate();making40dayDate();" id="dateOfBirth" readonly="true"/> 
      <span class="addingCalendar addingCalendarIcon fa fa-calendar"></span> 
     </div> 
    </div> 

CSS

.input_wrapper{ 
     position: relative; 
    } 
    .addingCalendarIcon{ 
     position: absolute; 
     right:0; 
     top:0; 
     width: 30px; 
     height: 30px; 
    } 

jQueryの

$(".addingCalendarIcon").click(function(){ 
     $("#dateOfBirth").trigger("focus"); 
    }); 

[FontAwesomeボタンとjQueryの日付ピッカー？]の