jQuery datepicker without input

Question

I've got a fairly complex web app that I'd like to add some date-picking UI to.

The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.

I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.

Here's what isn't working:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
    var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );

    jQuery.datepicker('dialog',
        (bIsDate ? new Date(sOriginal) : new Date()), // date
        function() { console.log('user picked a date'); }, // onSelect
        null, // settings (i haz none)
        event // position
    );

}

The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)

I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.

I'm using jQuery 1.4.3 and jQueryUI 1.8.6

Answer 1

From the plugin page: http://jqueryui.com/demos/datepicker/#inline

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>


<div class="demo">
    Date: <div id="datepicker"></div>
</div><!-- End demo -->

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

Answer 2

I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.

So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135

If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.