How to display jquery datepicker on link click?

Question

I need to show jquery datepicker on link click, also when a date is picked change link text to this date, how can I do it?

Answer 1

$("#dateField").datepicker({
 dateFormat:'dd/M/yy',
 minDate: 'now',
 changeMonth:true,
 changeYear:true,
 showOn: "focus",
 //buttonImage: "YourImage",
 buttonImageOnly: true, 
 yearRange: "-100:+0",  
}); 

$("dateField").datepicker( "option", "disabled", true );

Answer 2

Well, may be it's to late to reply in this post, but here is a great solution from Andrew in a similar thread, which works in 2015.

In a few words you need to put hidden input right after link and an empty div. The last one will do the trick.

Besides, there will no need in link click event.

Answer 3

This worked for me. Needs jquery-ui .ls and .css.

 $( function() {
            $( "#from" ).datepicker({
                changeMonth: true,
                changeYear: true
            });
            $( "#to" ).datepicker({
                changeMonth: true,
                changeYear: true
            });

Answer 4

jQuery UI date picker should do the job.

Check out the example using an icon to trigger the picker: http://jqueryui.com/demos/datepicker/#icon-trigger

You can also call the show() method to drop down the picker whenever you need to, e.g...

$('#mypicker').datepicker({
      //options
      minDate: '20.04.2012'
      //...
    });
$('#mylink').click(function(){
      $('#mypicker').datepicker('show');
    });

To change the link text after a date is selected, use something like this in initialization code:

$('#mypicker').datepicker({ onSelect:
    function(dateText, inst) {
        $('#mylink').text(dateText);
    }
});

Answer 5

Salam

I discover this solotion :

onclick="jQuery('#elementid').datetimepicker();jQuery('#elementid').datetimepicker('show');"

And work properly.

Sincerely yours.

Alireza Balvardi