How to fire jQuery UI DatePicker onclick?

Question

The standard code for DatePicker is:

<script>
    $(function() {
       $( "#datepicker" ).datepicker();
    });
</script>
<p>Date: <input type="text" id="datepicker"></p>

How to launch datepicker onclick event from inline HTML, I mean:

<input ... onclick="" >

and with no separate JS code?

I tried:

<p>Date: <input type="text" id="datepicker" onclick="$(function() {$('#datepicker').datepicker();});"></p>

But it's working only on second click.

How to make it work on first click?

Here's an answer of how to do that stackoverflow.com/a/1127215/1078487 — Carlos Quijano
– Carlos Quijano, Commented Mar 1, 2012 at 1:14
thanks. I have just updated my q: How to launch datepicker onclick event from inline html <input ... onclick="" , and with no separate JS code? — ihtus
– ihtus, Commented Mar 1, 2012 at 1:18
not a good idea in the first place and there can't possibly be any reason it has to be an inline onclick with no other datepicker code in page — charlietfl
– charlietfl, Commented Mar 1, 2012 at 1:34

Nick · Accepted Answer · 2012-03-01 01:26:57Z

12

<p>Date: <input type="text" id="dp" onclick="$('#dp').datepicker();$('#dp').datepicker('show');"></p>

That work by any chance?

I'm no expert, but I believe you were having to click it twice because the first click merely initialised it as a datepicker. After this initialising, it's behaving as a normal datepicker, regardless of the onclick.

answered Mar 1, 2012 at 1:26

Nick

3902 silver badges12 bronze badges

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

3 Comments

ihtus Over a year ago

thanks! that worked! from docs: datepicker( "show" ) - Call up a previously attached date picker. So "$('#dp').datepicker()" - initialization;

ihtus Over a year ago

thanks! that worked! from docs: datepicker( "show" ) - Call up a previously attached date picker. 1. So "$('#dp').datepicker()" - initialization; 2. $('#dp').datepicker('show'); - force showing datepicker. Is that right?

Nick Over a year ago

Yep, that's what it's doing. I think this not best practice though, and depending on how your program works, you may want to look at the .live function in jQuery? Anyway glad it helped.

charlietfl · Accepted Answer · 2012-03-01 01:22:20Z

6

After you create datepicker, open it this way:

 $('#datepicker').datepicker('show')

Go to datepicker API docs look at methods tab, it's all there

answered Mar 1, 2012 at 1:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

ihtus Over a year ago

as you can see in the q: I know how to use it with a separate js code. My aim is to use inline onlclick="" event execution.

Igor Jerosimić · Accepted Answer · 2015-10-30 10:56:43Z

1

Try this code:

<script>
$(function() {
    $("#datepic").datepicker({ showOn: 'button',buttonImage: 'image/calendar.gif'});

});
</script>

<input type="text" id="datepic" />

edited Oct 30, 2015 at 10:56

Igor Jerosimić

13.7k7 gold badges47 silver badges55 bronze badges

answered Nov 23, 2013 at 9:13

user3024508

111 bronze badge

Comments

Bert · Accepted Answer · 2012-03-01 01:18:36Z

0

like this one?

http://jsfiddle.net/tZXjR/

answered Mar 1, 2012 at 1:18

Bert

1,0393 gold badges14 silver badges27 bronze badges

1 Comment

ihtus Over a year ago

thanks. I have just updated my q: How to launch datepicker onclick event from inline html <input ... onclick="" , and with no separate JS code?

Collectives™ on Stack Overflow

How to fire jQuery UI DatePicker onclick?

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related