Question

我在$items = DB::table("mytable")->orderBy(DB::raw("DATE(startDate)"), 'ASC')->where('userId','=',$userId)->get();元素的项目中使用了 Jquery Datepicker 。每当我点击输入元素时，我的日历就会打开。但每当我点击日期选择器的input=text时，我的日历就不会被打开。我正在想象为什么会这样发生。

以下是我的HTML

icon

另请参阅我的jquery相同的

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

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

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

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

elements

所以修改你的代码：

<强> HTML：

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

<强> JS

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

Answer 3

您只需向该fa-calendar元素添加点击事件即可。

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

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

3 个答案: