Question

Ok, so I have the following 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>​

What I would like to do is this.

$('.date').datepicker()

I can’t seem to find any documentation to make a jquery-ui-datepicker work on a div like that.

If you know how to do this, or know another (easily styleable) datepicker that does, it would be much appreciated.

Thank you.

Answer 1

A way to do this is using the showOn option for the datepicker widget. Here’s the demo.

HTML

<input class="date hidden" />​

JS

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

CSS

​.hidden {
    display:none;
}​

Using the HTML you provided this is how it could be applied: example.