单击图标的jQuery datepicker
Posted
技术标签:
【中文标题】单击图标的jQuery datepicker【英文标题】：jQuery datepicker on click of icon 【发布时间】：2017-09-22 03:30:40 【问题描述】：我想在单击输入字段内的 FontAwesome 图标时显示 jQuery 日期选择器。下面是代码：
<div class="col-md-4 col-sm-4 col-xs-12">
<label for="datepicker">Date of birth*</label>
<input type="text" name='datepicker' class="form-control" value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
<span class="fa fa-calendar"></span>
</div>
jQuery('.fa-calendar').on('click' , function()
jQuery(this).datepicker().trigger('focus');
);
【问题讨论】：
【参考方案1】：试试这个
$(document).ready(function()
$("#datepicker").datepicker();
$('.fa-calendar').click(function()
$("#datepicker").focus();
);
);
这是一个例子
$(document).ready(function()
$("#datepicker").datepicker();
$('.fa-calendar').click(function()
$("#datepicker").focus();
);
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-4 col-sm-4 col-xs-12">
<label for="datepicker">Date of birth*</label>
<input type="text" name='datepicker' class="form-control" value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
<span class="fa fa-calendar"></span>
</div>【讨论】：
如何在全球范围内为所有日期选择器执行此操作？我想知道为此目的填充日期选择器是否是个好主意？ Brilliant ...由于我的 jQuery 版本，我不得不编写“.trigger('focus')” 而不仅仅是“.focus()”，但无论如何，“focus”都能解决问题我……我在各种 SO 帖子中遇到的所有其他解决方案都不适合我！【参考方案2】： <script>
$(document).on('click',".calendar",function()
$("#datepicker").datepicker("show");
);
</script>
【讨论】：
请不要提交没有任何解释为什么以及如何解决问题的代码块。 这对我有用，但它有一个令人讨厌的副作用，即我的日期弹出窗口在它出现后的几分之一秒内消失了（我现在意识到这可能是由于“点击”事件级联到父元素，所以“event.stopPropagation()”可能已经修复了）【参考方案3】： $( function()
$( "#datepicker" ).datepicker(
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "icono",
showOn: "both"
);
);<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>【讨论】：
【参考方案4】：你要在输入框上触发日期选择器，而不是图标，所以你需要改变
jQuery(this).datepicker().trigger('focus');`
成为
jQuery("#datepicker").datepicker().trigger('focus');
【讨论】：
【参考方案5】：您可以使用日期选择器上的'open' 设置以编程方式打开它。无需触发focus 事件。您还需要在#datepicker 元素上调用datepicker() 方法，而不是单击的图标。试试这个：
jQuery(function($)
$('#datepicker').datepicker();
$('.fa-calendar').on('click', function()
$('#datepicker').datepicker('open');
);
);
【讨论】：
【参考方案6】：HTML
<div class="col-md-4 col-sm-4 col-xs-12">
<label for="datepicker">Date of birth*</label>
<input type="text" name='datepicker' class="form-control" value="Select
date" id="datepicker_val" ng-required="true" placeholder="MM/DD/YYYY" >
<span class="fa fa-calendar"></span>
</div>
JS
jQuery(".fa-calendar").datepicker();
这就是你想要做的。它会起作用，您可以在输入类型中填写日期，如下所示。
jQuery(".fa-calendar").datepicker().on('changeDate', function(ev)
jQuery("#datepicker_val").val(ev.date.valueOf());
);
【讨论】：
【参考方案7】：jQuery('.fa-calendar').on('click' , function()
event.preventDefault();
$('#startdate').click();
);
希望这会奏效...！！
【讨论】：
以上是关于单击图标的jQuery datepicker的主要内容，如果未能解决你的问题，请参考以下文章
是否有 Chrome 插件可以通过单击网页上的工具栏图标或键盘快捷键来运行 jquery 代码？