如何在輸入字段的末尾點擊fontAwesome圖標

我有一個jQuery日期選擇器的輸入字段。所以當你點擊輸入字段時，它會顯示日曆。我還在：after後插入了日曆Font Awesome圖標。如何讓該部分可點擊並啓動jQuery日曆？我無法使輸入字段的背景透明，因爲我需要它是白色的。如何在輸入字段的末尾點擊fontAwesome圖標

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

來源

2017-09-28 Jay Jay

[jQuery的日期選擇器與FontAwesome按鈕？]的可能的複製（https://stackoverflow.com/questions/24019359/jquery-datepicker-with-fontawesome-button） –

你可以只讓被點擊日曆圖標當輸入要素集中。

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

來源

2017-09-28 07:15:02

簡單，完善。我也可以將這些應用到其他日期。 –

試試像下面的代碼片段。而不是在after僞位置添加fontawesome圖標，並使用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>

來源

2017-09-28 07:13:34

它不可能使僞元素可點擊的，因爲它們不是DOM的一部分。

什麼，你可以在你的情況做的是使包含輸入字段（.addingCalendar）元素觸發日期選擇，而不是（#dateOfBirth）。

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

    });

創造了一個小提琴：https://jsfiddle.net/zg45anab/

來源

2017-09-28 07:14:40

用於圖標單獨的元件和包裹與父包裝輸入和圖標元件

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"); 
    });

來源

2017-09-28 07:26:56

如何在輸入字段的末尾點擊fontAwesome圖標

回答

相關問題