javascript 没有文本框的 jQuery UI 日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16491535/
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
jQuery UI datepicker without a textbox
提问by Legion
Is it possible to use the jQuery UI datepicker without a text box? I just want to have the calendar icon that when clicked shows the calendar control. Then when a date is selected the control should disappear. Then I just want to capture the date selected and pass it to my own javascript function.
是否可以在没有文本框的情况下使用 jQuery UI 日期选择器？我只想让点击时显示日历控件的日历图标。然后选择日期时，控件应消失。然后我只想捕获选择的日期并将其传递给我自己的 javascript 函数。
I've tried using it with spans and divs but the behavior is all wrong. It doesn't hide when a user selects a date. If I attach it to a hidden field as some have suggested, the datepicker can't be launched.
我试过将它与跨度和 div 一起使用，但行为都是错误的。当用户选择日期时它不会隐藏。如果我按照某些人的建议将其附加到隐藏字段，则无法启动日期选择器。
回答by turnt
Here's a solution I have.
这是我的解决方案。
Fiddle:
小提琴：
// Set up datepicker toggle functionality
$("#datepicker").hide();
$("#buttonHere").click(function(){
$("#datepicker").toggle();
});
$("#datepicker").datepicker({
onSelect: function(value, date) {
alert('The chosen date is ' + value);
// Hide the datepicker div when something is selected
$("#datepicker").hide();
}
});
Here's the HTML
这是 HTML
<button id = "buttonHere">Click to show datepicker</button>
<div id = "datepicker"></div>
回答by Legion
Had to use a kludge but I got it to work. Here's the jQuery.
不得不使用 kludge 但我让它工作了。这是jQuery。
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "btn_calendar.gif",
buttonImageOnly: true,
onSelect:function(selectedDate){
alert(selectedDate);
}
});
});
Here's the HTML.
这是 HTML。
<input type="text" id="datepicker" size="1" readonly style="outline: none; color: #FFFFFF; border: 0px solid #000000;"/>
Basically I made the textbox invisible and readonly without actually "hiding" it. But the behavior works. Seems to be the only way to get a datepicker without a visible textbox.
基本上我让文本框不可见和只读，而没有真正“隐藏”它。但这种行为有效。似乎是获得没有可见文本框的日期选择器的唯一方法。
回答by Waseem Abu Senjer
You can use the "ShowOn" option to use datepicker with an icon.
您可以使用“ShowOn”选项来使用带有图标的日期选择器。
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
onSelect:function(selectedDate){
your_function(selectedDate);
}
});
});
also you can use the "onSelect" option to pass the selected date to your javascript function.
您也可以使用“onSelect”选项将所选日期传递给您的 javascript 函数。
回答by sergioadh
You can assign the datepicker to a hidden input and then just assign the selected date to whatever you need it to e.g. a label.
您可以将日期选择器分配给隐藏的输入，然后将所选日期分配给您需要的任何内容，例如标签。
$('#hiddenInput').datepicker({
showOn: 'button',
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
onSelect: function (selectedDate) {
$('#calendarDay').text(selectedDate);
$('#hiddenInput').datepicker('destroy');
}
});
This is a jsFiddle showing that:
这是一个 jsFiddle 显示：
