如何使輸入字段末尾的 fontAwesome Icon 也可點擊

Question

我有一個帶有 jQ​​uery 日期選擇器的輸入字段。 因此，當您單擊輸入字段時，它將顯示日歷。 我還在 :after 中插入了一個日歷 Font Awesome 圖標。 如何使該部分也可點擊並啟動 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

您可以在單擊日歷圖標時使輸入元素成為焦點。

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

JSFiddle 演示

Answer 2

嘗試類似下面的代碼片段。 而不是after偽定位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>

Answer 3

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

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

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

    });   

創建了一個小提琴： 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");
    });