1

是否可以在没有文本框的情况下使用 jQuery UI 日期选择器？我只想让单击时显示日历控件的日历图标。Then when a date is selected the control should disappear. 然后我只想捕获所选日期并将其传递给我自己的 javascript 函数。

我已经尝试将它与 span 和 div 一起使用，但行为都是错误的。当用户选择日期时它不会隐藏。如果我按照某些人的建议将其附加到隐藏字段，则无法启动日期选择器。

4

4 回答 4

6

这是我的解决方案。

小提琴：

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

<button id = "buttonHere">Click to show datepicker</button>

<div id = "datepicker"></div>
于 2013-05-10T22:33:18.680 回答
1

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

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

这是HTML。

<input type="text" id="datepicker" size="1" readonly style="outline: none; color: #FFFFFF; border: 0px solid #000000;"/>

基本上，我使文本框不可见且只读，而没有实际“隐藏”它。但这种行为有效。似乎是在没有可见文本框的情况下获取日期选择器的唯一方法。

于 2013-05-10T22:53:06.823 回答
0

您可以使用“ShowOn”选项来使用带有图标的日期选择器。

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

    });
  });

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

于 2013-05-10T22:24:42.130 回答
0

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

$('#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');
    }
});

这是一个 jsFiddle 显示：

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

于 2013-05-10T22:35:51.720 回答