OnClick日历图标日历未打开Jquery Datepicker
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了OnClick日历图标日历未打开Jquery Datepicker相关的知识,希望对你有一定的参考价值。
我在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
});
});
那么,如何点击其图标打开日历。下面是加载页面时的样子
答案
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>
另一答案
仅当关联的输入框为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" );
})
});
另一答案
您只需将click事件添加到该fa-calendar
元素即可。
$('.fa-calendar').click(function () {
$('#feRouteDate').datepicker();
});
以上是关于OnClick日历图标日历未打开Jquery Datepicker的主要内容,如果未能解决你的问题,请参考以下文章
如何在没有 jquery 的情况下在 Angular 中的页面加载时自动打开 HTML 日历
在dijit的图标按钮的点击加载的dijit日历的具体日期禁用