OnClick日历图标日历未打开Jquery Datepicker

Question

我在input=text元素的项目中使用了Jquery Datepicker。每当我点击输入元素时，我的日历就会打开。但每当我点击日期选择器的icon时，我的日历就不会被打开。我在想象为什么会这样发生。

下面是我的HTML

<span class="datepicker"><input type="text" id="feRouteDate" /><i class="fa fa-calendar" aria-hidden="true"></i></span>

同样请看我的jquery

$(function () {
    $("#feRouteDate").datepicker({
        dateFormat: 'dd/mm/yy',
        maxDate: 0
    });
});

那么，如何点击其图标打开日历。下面是加载页面时的样子

Answer 1

click上的calendar事件应该使用datepicker.("show")显示日历

使用siblings("input")将允许检测应该打开其日期选择器的日历图标的最近的input。

//set all your datepickers inputs
$("#feRouteDate,#feRouteDate2").datepicker({
        dateFormat: 'dd/mm/yy',
        maxDate: 0
    });
    
   
//You can show datepicker on click on the calendar icon
$(".fa-calendar").on("click", function(){
        $(this).siblings("input").datepicker("show");    
    });

<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<span class="datepicker"><input type="text" id="feRouteDate" /><i class="fa fa-calendar" aria-hidden="true"></i></span> <br>

<span class="datepicker"><input type="text" id="feRouteDate2" /><i class="fa fa-calendar" aria-hidden="true"></i></span>

</body>

Answer 2

仅当关联的输入框为clicked时才打开的日历的默认行为。但是，你可以点击其他open elements它。使用：

$("#some-element").click(function(){
  $('#my-date-picker').datepicker( "show" );
})

所以修改你的代码：

HTML：

<span class="datepicker"><input type="text" id="feRouteDate" /><i class="fa fa-calendar" id="icon" aria-hidden="true"></i></span>

JS

$(function(){    

  $('#feRouteDate').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });

    $("#icon").click(function(){
    $('#feRouteDate').datepicker( "show" );
    })
});

Answer 3

您只需将click事件添加到该fa-calendar元素即可。

$('.fa-calendar').click(function () {
    $('#feRouteDate').datepicker();
});

OnClick日历图标日历未打开Jquery Datepicker

问题描述投票：1回答：3

3个回答

最新问题

OnClick日历图标日历未打开Jquery Datepicker

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3