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

【问题标题】：OnClick of calendar icon Calendar is not opening Jquery DatepickerOnClick 日历图标日历未打开 Jquery Datepicker
【发布时间】：2018-06-05 01:51:27
【问题描述】：

我在 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
    });
});

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

【问题讨论】：

可以尝试全局绑定事件。 $(document).on("click", ".fa-calendar", function() { $(".datepicker").show() });

标签： javascript jquery datepicker calendar bootstrap-modal

【解决方案1】：

只有在关联输入框为clicked 时才会打开的日历的默认行为。但是，您也可以通过点击其他elements 来open。使用：

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

$(function(){    

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

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

【讨论】：

它不是准确的答案，如果我有 100 个日历输入，那么我应该在点击事件中添加 100 个吗？
我认为一些单一的generic 方法可以为你做到这一点。
是的，可能在datepicker 中可用，但我不确定.. 有任何猜测或诡计吗？
我只找到这个work around。可能你可以在你所有的icons 上使用一些类然后show closest datepicker on click 或pass datepicker id to click 事件。类似的东西

【解决方案2】：

calendar 上的 click 事件应使用 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>

【讨论】：

我无法将所有输入设置为datepickers。
您知道是否可以（除了向按钮添加“显示”功能）禁用日历在单击文本框时显示的默认行为，以便日历仅在你点击按钮了吗？

【解决方案3】：

您可以只向该fa-calendar 元素添加一个点击事件。

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

【讨论】：