单击一个div (或其他东西)并获得一个日期选择器？

Question

好的，我有下面的html。

<div class="holder">                                                         
  <span class="mini-arrow"></span>
  <div class="date">
    <p>11</p>
    <p><span>Apr<br />2012</span></p>
  </div>
  <div class="hour">                                                                                         
    <p>3:20</p>                                                                               
    <p><span>pm</span></p>                                                                  
  </div>                                                                                                     
  <div class="cl">&nbsp;</div>                                                                               
</div>​

我想做的是这样的。

$('.date').datepicker()

我似乎找不到任何文档来让jquery-ui-datepicker在这样的div上工作。

如果你知道如何做到这一点，或知道另一个(易于样式化的) datepicker可以做到这一点，那将是非常感谢的。

谢谢。

Answer 1

为此，一种方法是对datepicker小部件使用showOn选项。这是demo。

HTML

<input class="date hidden" />​

JS

$('.date').datepicker({
    showOn: "button",
    buttonImageOnly: false,
    buttonText : "Select Date"
});​

CSS

​.hidden {
    display:none;
}​

使用您提供的超文本标记语言，它的应用方式如下：example。