I need to show jQuery UI datepicker on link click, also when a date is picked change link text to this date, how can I do it?
Add a comment
|
6 Answers
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);
}
});
9 Comments
Burjua
yes, I'm using this datepicker, but I need it to appear on text link click, not input and not button/image, can't find how to do it.
Burjua
How can I call
show() method? I'm not very good in JavaScript, thanksBurjua
What is
#mypicker in this case?
DigitalDan
The id of the input element that you initialise as a datepicker. In jQuery examples (follow the links I gave you) it would be '#datepicker'
Burjua
I'm trying this code : ` $(function() { $( "#datepicker" ).datepicker(); $('#mylink').click(function(){ $('#datepicker').show(); }); })` but it is not working. I have hidden input with
id="datepicker" and link with id="mylink" |
$("#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 );
Comments
This worked for me. Needs jquery-ui .ls and .css.
$( function() {
$( "#from" ).datepicker({
changeMonth: true,
changeYear: true
});
$( "#to" ).datepicker({
changeMonth: true,
changeYear: true
});
Comments
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.
Comments
This worked for me :
$('#dateinterval').click();
