使用带有自定义触发按钮的 jQuery 日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3219371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery Date picker with a custom trigger button
提问by pvaju896
How do I make the jQuery Datepicker open up by a user defined button?
如何通过用户定义的按钮打开 jQuery Datepicker？
回答by Nick Craver
There's built-in support for this, having an icon or button to right right of the textbox, like this:
有对 this的内置支持，在文本框的右侧有一个图标或按钮，如下所示：
$("#datepicker").datepicker({
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
If you want to show it from anotherbutton, or really any event, call the showmethod, like this:
如果要从另一个按钮或任何事件显示它，请调用show方法，如下所示：
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
回答by smack0007
回答by Sobhit Singh
This is HTML for date picker icon
这是日期选择器图标的 HTML
onclick="show_date_picker('#datepicker_id'); on you icon element
This is function for open & close datepicker on icon click
这是单击图标时打开和关闭日期选择器的功能
function show_date_picker(source_datepicker){
if($(source_datepicker).datepicker("widget").is(":visible")){
$(source_datepicker).datepicker("hide");
}else{
$(source_datepicker).datepicker("show");
}
}
回答by selcuk mart
I have solved using focus.
我已经解决了使用焦点。
$("#datepicker").datepicker();
$("#myButton").click(function() {
$("#datepicker").focus();
});
回答by Curious-programmer
The question is not clear if you want an additional trigger or an additional trigger. If you want to have an additional trigger. The accepted answer did not work for me perhaps its an outdated version. The below code worked for me as a general trigger
问题不清楚你想要一个额外的触发器还是一个额外的触发器。如果你想有一个额外的触发器。接受的答案对我不起作用，也许它是一个过时的版本。以下代码作为一般触发器对我有用
$('#datepicker').jqxDateTimeInput('open');
回答by Jignesh Patel - Sr. HTML Dev.
$("#checkin").datepicker({
dateFormat: 'dd/mm/yy',
minDate: '0',
changeMonth: true,
numberOfMonths: 1
});.datedivmng{
float: left;position: relative;
}
.datedivmng .datepicker{
position: relative;width: 87%!important;
cursor: pointer;
}
.datedivmng:after {
/* symbol for "opening" panels */
font-family: 'FontAwesome';
content: "\f073";
color: #329ac4;
font-size: 16px;
text-shadow: none;
position: absolute;
vertical-align: middle;
pointer-events: none;
float: right;
top: 2px;
right: 7px;
}<div class="datedivmng">
<input type="text" id="checkin" name="checkin" value="" /></div>