jquery calender / datepicker

Question

I am having trouble getting my datepicker to popup on an image click and sending the selected input to my text entry field. Basically, when the user clicks on the calender image, the datepicker popup should appear, they choose an input, and it appears in the text input. Also, I need the text input to show the proper date on the calender if they input a date then check the calender. Here is my input and image section.

<p>Date: <input type="text" class="screening_01" id="screening_01" maxlength="10" size="10" value="<%=session.getAttribute("screening_01")==null?"":session.getAttribute("screening_01")%>" /></p>
<div id="calender"><img src="/images/calendar.png" /></div>

This is a working datepicker, but it only works if I click the text input itslef.

$(function() {
    $( "#screening_01" ).datepicker();
});

Now I need it to popup when I click the calender image or div, maybe something like this? (not working of course)

$("#calender").click(function() {
       $("#datepicker").show(); 
    });

Adriano Carneiro · Accepted Answer · 2013-04-08 17:53:37Z

2

This is what you are looking for, using the show method:

$("#calender").click(function() {
   $("#screening_01").datepicker( "show" );
});

When in doubt, always look in the API Reference: http://api.jqueryui.com/datepicker/#method-show

answered Apr 8, 2013 at 17:53

Adriano Carneiro

58.8k12 gold badges94 silver badges123 bronze badges

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

3 Comments

Rick Calder Over a year ago

only thing is I do believe his datepicker id is screening_01

user2089255 Over a year ago

Thank you for the responses. ill try this here shortly!

user2089255 Over a year ago

Man, you guys make it look so easy, I am still an intro programmer, I am taking c# now, but javascript later.

bipen · Accepted Answer · 2013-04-08 17:55:33Z

0

use show option of datepicker and call it in #screening_01

$("#calender").click(function() {
  $( "#screening_01" ).datepicker('show');
});

answered Apr 8, 2013 at 17:55

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Pank · Accepted Answer · 2013-04-08 17:57:56Z

0

May be this will help you...

$( "#screening_01" ).datepicker({
  showOn: "button",
  buttonImage: "images/calendar.gif",
  buttonImageOnly: true
});

For reference: http://jqueryui.com/datepicker/#icon-trigger

answered Apr 8, 2013 at 17:57

Pank

14.4k10 gold badges35 silver badges46 bronze badges

Comments

Icarus · Accepted Answer · 2013-04-08 18:08:05Z

0

The datepicker already has an option to trigger on an icon image.

$( "#datepicker" ).datepicker({
      showOn: "both", //image click and focus on input field
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true
    });

edited Apr 8, 2013 at 18:08

answered Apr 8, 2013 at 17:55

Icarus

64k14 gold badges102 silver badges116 bronze badges

Collectives™ on Stack Overflow

jquery calender / datepicker

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related