没有文本框的jQuery UI datepicker

是否可以在没有文本框的情况下使用jQuery UI datepicker？ 我只想让日历图标在点击时显示日历控件。 然后，当选择日期时，控件应该消失。 然后我只想捕获所选的日期并将其传递给我自己的javascript函数。

我尝试过使用跨度和div，但行为是错误的。 当用户选择日期时，它不会隐藏。 如果我像某些人建议的那样将它附加到隐藏字段，则无法启动日期选择器。

Answer 1

这是我的解决方案。

小提琴：

http://jsfiddle.net/qphza/1/

// 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(); } }); 

这是HTML

 Click to show datepicker 
 

Answer 2

您可以使用“ShowOn”选项将datepicker与图标一起使用。

 $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, onSelect:function(selectedDate){ your_function(selectedDate); } }); }); 

您也可以使用“onSelect”选项将所选日期传递给您的javascript函数。

Answer 3

您可以将日期选择器分配给隐藏输入，然后将所选日期分配给您需要的任何日期，例如标签。

 $('#hiddenInput').datepicker({ showOn: 'button', buttonImage: 'http://sofzh.miximages.com/javascript/calendar.gif', buttonImageOnly: true, onSelect: function (selectedDate) { $('#calendarDay').text(selectedDate); $('#hiddenInput').datepicker('destroy'); } }); 

这是一个jsFiddle表明：

http://jsfiddle.net/pxeFM/8/

Answer 4

不得不使用kludge，但我让它工作。 这是jQuery。

  $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "btn_calendar.gif", buttonImageOnly: true, onSelect:function(selectedDate){ alert(selectedDate); } }); }); 

这是HTML。

基本上我使文本框不可见和只读而不实际“隐藏”它。 但行为有效。 似乎是获得没有可见文本框的日期选择器的唯一方法。