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

Ricardo Souza · Accepted Answer · 2012-04-21 02:10:42Z

16

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.

answered Apr 21, 2012 at 2:10

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:46:54Z

9

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.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Apr 21, 2012 at 1:43

jimmym715

1,4901 gold badge16 silver badges26 bronze badges

3 Comments

Tom Over a year ago

Thanks for digging! I've also done some peeking, and while I haven't gotten it working yet, I discovered that the plugin actually generates a hidden INPUT when the "dialog" method is called, hiding it behind the visible datepicker when active. Seems kind of hokey, but confirms what a lot of other SO posts suggest: the plugin is really only designed for the standard case. I may have to fix that.

Tom Over a year ago

After quite a bit of testing, this was the only supported pattern. Someone needs to enhance the datepicker so it is more flexible. Maybe that someone is me. One battle at a time, though.

jave.web Over a year ago

Also using div/span results in inline (always displayed) datepicker... Unaswered question relating this problem (no answer YET) - stackoverflow.com/questions/17371859/…

Shehzad · Accepted Answer · 2012-04-20 21:42:57Z

1

You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.

<input type="hidden" id="yourField" />

and use

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

answered Apr 20, 2012 at 21:42

Shehzad

2,95219 silver badges21 bronze badges

1 Comment

Tom Over a year ago

Sorry, but there are no INPUTs in this part of the app, and I'm not adding one simply because it's the most obvious way of attaching this behavior. I feel like I was pretty clear about that in my post.

Collectives™ on Stack Overflow

jQuery datepicker without input

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related