Question

我有一个带有jQuery日期选择器的输入字段。因此，当您单击输入字段时，它将显示日历。我还在：after后面插入了一个日历Font Awesome图标。如何使该部分也可以点击并启动jQuery日历？我无法使输入字段的背景透明，因为我需要它是白色的。

"SomeWord"

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

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 Demo

Answer 2

尝试类似下面的代码片段。而不是在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 ）触发datepicker而不是（ #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");
    });

如何使输入字段末尾的fontAwesome图标也可以点击

4 个答案: