如何使输入字段末尾的 fontAwesome Icon 也可点击

Question

I have an input field with jQuery date picker. So when you click on the input field it will show the calendar. I have also inserted a calendar Font Awesome icon in the :after. How do I make that part clickable too and launch the jQuery calendar? I can't make the background of the input field transparent because I need it to be white.

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

You can just make the input element focused when the calendar icon is clicked.

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

Answer 2

Try something as like below snippet. Instead of adding fontawesome icon in after pseudo position it and write click event using jquery.

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

Its not possible to make the pseudo Elements clickable as they are not part of the DOM.

What you can do in your case is make the element containing the input field( .addingCalendar ) trigger the datepicker instead of ( #dateOfBirth ).

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

    });   

created a fiddle: https://jsfiddle.net/zg45anab/

Answer 4

Use separate element for icon and wrap the input and icon element with parent wrapper

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