CODEWITHSUNDEEP
javascriptjquery-uijquery
Satch3000
Satch3000

Reputation: 49384

JQuery DatePicker Link to Month

I have 2 pages. On page 1 I have links and on page 2 I have a JQuery DatePicker.

What I need to do is to have links to the different months.

For example, on page 1 have a link that links to May and when I click on the link it goes to page 2 and the JQuery DatePicker with show May month.

Can this be done please?

UPDATE: Using firebug I've hovered over the datapicker next button and the code is this: 

onclick="DP_jQuery_1304716221986.datepicker._adjustDate('#dp1304716221987', +1, 'M');"

Upvotes: 0

Views: 684

Answers (3)

Tim Hobbs
Tim Hobbs

Reputation: 2017

Sorry, not enough rep yet to simply add a comment. Edgar's sample works, but I'd make one minor change. I'd also pass in the year since you may need it. Depending on how you are implementing this system, I'd imagine you may run into problems requiring a year parameter. So you link would look like this:

/page.html?month=1&year=2010

And then the js would look like this:

$(document).ready(function(){
   var month = getURLParameter('month') - 1; //-1 cause javascript months start in 0
   var currentYear = getURLParameter('year');
   var defaultDate = new Date(currentYear, month, 1); //Set to first day of the month
   $("#datepicker").datepicker({ defaultDate: defaultDate });
});

Just be sure to change "#datepicker" to the proper selector.

Upvotes: 1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Yes. Assuming you have:

page1.htm
    <a href="page2.htm?month=4"> April </a>
    <a href="page2.htm?month=5"> May </a>
    <a href="page2.htm?month=6"> June </a>

(note that we're appending an url parameter with the number of the month)

In page 2, do this:

page2.htm
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
$(document).ready(function(){
   var month = getURLParameter('month') - 1; //-1 cause javascript months start in 0
   var currentYear = (new Date()).getFullYear();
   var defaultDate = new Date(currentYear, month, 1); //Set to first day of the month
   $( "#your_datepicker" ).datepicker({ 
      defaultDate: defaultDate 
   });
});

As you see, in page2 we read the url param 'month' and create the datepicker with it.

Hope this helps. Cheers

Upvotes: 1

PetrolMan
PetrolMan

Reputation: 381

There is a method to set the date: .datepicker( "setDate" , date )

And as far as actually showing the datepicker, you might be able to trigger a click event on it or perhaps use the dialog method to show it.

Have a look at the documentation: http://jqueryui.com/demos/datepicker/#method-dialog

Upvotes: 1

Related Questions