How to display jquery datepicker on link click?

2019-01-22 22:06发布

问题:

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?

回答1:

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);
    }
});


回答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.



回答3:

$("#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 );


回答4:

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

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


回答5:

Salam

I discover this solotion :

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

And work properly.

Sincerely yours.

Alireza Balvardi