没有文本框的jQuery UI日期选择器[重复]答案

【问题标题】：jQuery UI datepicker without a textbox [duplicate]没有文本框的jQuery UI日期选择器[重复]
【发布时间】：2013-05-05 16:27:16
【问题描述】：

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

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

【问题讨论】：

这可能会有所帮助：Open JQuery Datepicker by clicking on an image w/ no input field
谢谢。不幸的是，我从那里开始尝试了那里列出的所有策略，但均无济于事。

标签： javascript jquery jquery-ui

【解决方案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

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

<div id = "datepicker"></div>

【讨论】：

关联的 HTML 是什么？
@Barmar 它在 JsFiddle 链接中
你应该在答案中包含它，小提琴只是为了演示目的。

【解决方案2】：

不得不使用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;"/>

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

【讨论】：

【解决方案3】：

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

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

    });
  });

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

【讨论】：

不幸的是，除非 datepicker 是一个文本框（我不想要），否则行为是错误的。如果我将 datepicker 设为 div/span，则选择日期后日历不会消失。
可以隐藏输入框。
添加 onSelect 会破坏它。添加 onSelect 后，日期选择器不可见。你确定它没有被弃用吗？
忽略最后一条评论。 onSelect 有效。
@Legion 看看我的回答，这正是你所需要的。

【解决方案4】：

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

$('#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/

【讨论】：