Open JQuery Datepicker by clicking on an image w/ no input field

Question

I want to have the JQuery Datepicker open when the user clicks on an image. There is no input field where the selected date appears afterwards; I'm just going to save the entered date to the server via Ajax.

Currently I have this code:

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

But nothing happens when I click on the image. I have also tried saving the result of the datepicker() call to a global var and then calling datepicker('show') from the onclick() event of the image, but same result.

Pavel Sem · Accepted Answer · 2021-05-21 00:27:41Z

118

Turns out that a simple hidden input field does the job:

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

And then use the buttonImage attribute for your image, like normal:

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.

JSFiddle

edited May 21, 2021 at 0:27

Pavel Sem

1,7553 gold badges23 silver badges41 bronze badges

answered Jul 14, 2009 at 18:42

ep4169

2,3652 gold badges17 silver badges20 bronze badges

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

3 Comments

Sen Jacob Over a year ago

How can we set the alignment property when input is hidden type?

patz Over a year ago

here's a jsfiddle if some one need it :-) -------->>>>>> jsfiddle.net/pratik24/M9Hj6

Rohit Arora Over a year ago

I want to use it with date time picker but doesn't seem there is any option for it in extended date time pickers. Can anyone help?

Pavel Sem · Accepted Answer · 2021-05-20 18:54:27Z

24

The jQuery documentation says that the datePicker needs to be attached to a SPAN or a DIV when it is not associated with an input box. You could do something like this:

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

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

JSFiddle

edited May 20, 2021 at 18:54

Pavel Sem

1,7553 gold badges23 silver badges41 bronze badges

answered Jul 10, 2009 at 21:39

Jose Basilio

51.7k13 gold badges124 silver badges117 bronze badges

4 Comments

ep4169 Over a year ago

This works, but strangely I lose some functionality with this monthly. For example, I don't get the scroll open animation effect. More importantly, the calendar doesn't go away when I click outside it.

ep4169 Over a year ago

Also, what is the purpose of adding that click() method to #datepicker? And by the way, I meant "method", not "monthly". Got calendars on the brain!

Jose Basilio Over a year ago

The reason for adding the click() method to the #datepicker is to make it hide, otherwise it will remain visible. Keep in mind that the standard behavior only works when the calendar is associated with a textbox. You could probably add an .blur() handler to make it hide when you move your mouse away from the calendar.

Rohit Arora Over a year ago

I want to use it with date time picker but doesn't seem there is any option for it in extended date time pickers. Can anyone help?

Aaron · Accepted Answer · 2011-03-10 15:28:42Z

23

If you are using an input field and an icon (like this example):

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

You can attach the datepicker to your icon (in my case inside the A tag via CSS) like this:

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

edited Mar 10, 2011 at 15:28

Aaron

10.9k13 gold badges41 silver badges53 bronze badges

answered Mar 27, 2010 at 18:03

Pablius

4203 silver badges9 bronze badges

Comments

Mohamed Ghr · Accepted Answer · 2011-03-02 06:59:45Z

8

To change the "..." when the mouse hovers over the calendar icon, You need to add the following in the datepicker options:

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',

answered Mar 2, 2011 at 6:59

Mohamed Ghr

811 silver badge1 bronze badge

Comments

takrl · Accepted Answer · 2011-07-08 11:12:50Z

3

HTML:

<div class="CalendarBlock">
    <input type="hidden">
</div>

CODE:

$CalendarBlock=$('.CalendarBlock');
$CalendarBlock.click(function(){
    var $datepicker=$(this).find('input');
    datepicker.datepicker({dateFormat: 'mm/dd/yy'});
    $datepicker.focus(); });

edited Jul 8, 2011 at 11:12

takrl

6,5003 gold badges64 silver badges71 bronze badges

answered Dec 22, 2009 at 22:59

Rahen Rangan

7155 silver badges8 bronze badges

Comments

Jari · Accepted Answer · 2014-12-12 08:36:51Z

Having a hidden input field leads to problems with datepicker dialog positioning (dialog is horizontally centered). You could alter the dialog's margin, but there's a better way.

Just create an input field and "hide" it by setting it's opacity to 0 and making it 1px wide. Also position it near (or under) the button, or where ever you want the datepicker to appear.

Then attach the datepicker to the "hidden" input field and show it when user presses the button.

HTML:

<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">

CSS:

#date-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height 30px;
}

#date-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 32px; // height of the button + a little margin
    opacity: 0;
}

JS:

$(function() {
   $('#date-field').datepicker();

   $('#date-button').on('click', function() {
      $('#date-field').datepicker('show');
   });
});

Note: not tested with all browsers.

Kailas · Accepted Answer · 2014-04-18 05:07:38Z

1

$(function() {
   $("#datepicker").datepicker({
       //showOn: both - datepicker will come clicking the input box as well as the calendar icon
       //showOn: button - datepicker will come only clicking the calendar icon
       showOn: 'button',
      //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
      buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      dateFormat: 'dd-mm-yy'
  });
});

The above code belongs to this link

answered Apr 18, 2014 at 5:07

Kailas

3,2415 gold badges48 silver badges55 bronze badges

Comments

Karthikeyan Ganesan · Accepted Answer · 2017-02-10 20:11:30Z

0

<img src='someimage.gif' id="datepicker" />
<input type="hidden" id="dp" />

 $(document).on("click", "#datepicker", function () {
   $("#dp").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 'today'}).datepicker( "show" ); 
  });

you just add this code for image clicking or any other html tag clicking event. This is done by initiate the datepicker function when we click the trigger.

edited Feb 10, 2017 at 20:11

answered Feb 10, 2017 at 20:04

Karthikeyan Ganesan

2,05524 silver badges26 bronze badges

Collectives™ on Stack Overflow

Open JQuery Datepicker by clicking on an image w/ no input field

8 Answers 8

3 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related