Date link from blogpost

Hi Anders,

That’s not supported at this time, though it is a feature I’ve thought about adding. If you’re a bit of a coder, the pickadate.js library includes a powerful API with a set method you can use to select a date after the page has loaded. From the JavaScript you can set the date like this (replace new Date() with any date):

datepicker.set( 'select', new Date() );

Beware that this part of the code is a lot less stable than other parts, so you might need to keep an eye on updates in case anything changes.

Something like this?

mylink

<a href='https://https://domain.lokal/reservation/' onclick='myJavaScriptFunction(picker.set('select', new Date(2013, 3, 30)));'>mylink</a>

Hi deranders,

Unfortuantely, that won’t work if you’re jumping from one page to the next. The JavaScript has to be executed on the page where the booking form exists, so you’d have to pass the date to that URL, then retrieve and process it in JavaScript on the booking form page.

Pass the date with the URL:

<a href="https://yoursite.com/reservation/?rtbdate=2014-03-30">mylink</a>

Then you’d need some JavaScript to capture that date if it exists and update it on the booking form page:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var date = getQueryVariable( 'rtbdate' );
if ( date !== false && typeof datepicker !== 'undefined' ) {
       datepicker.set( 'select', date );
}

Of course, none of that code is tested. But hopefully it gives you an idea.

(getQueryVariable courtesy of css-tricks.com)

Perfect. I worked.

Thanks!!

Hi NateWr

I have come across a problem.

With the above solution the application picks the next available date and not the one from the link.

I have the “function getQueryVariable(variable)” code pastet into the booking-form.js just after “

// If no date has been set, select today’s date if it’s a valid
// date. User may opt not to do this in the settings.

“

My wordpress permalink settings is the “day and name” selection. ( if that should affect anything )

I can’t figure out where the problem is.

Do you have an idea?

Hi deranders,

Can you send me a link to a page where it’s supposed to work? I’ll take a look and see if I can help.

https://foodoir.dk/

In the bottom of the top post it says “BOOK ARRANGEMENT” thats the link to the Reservations page.

Hi deranders,

It looks like you’ve placed the code before the current date is selected, not after. Your code looks like this right now:

function getQueryVariable(variable)
		{
       		var query = window.location.search.substring(1);
       		var vars = query.split("&");
       		for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       		}
       		return(false);
			}

		var date = getQueryVariable( 'rtbdate' );
		if ( date !== false && typeof datepicker !== 'undefined' ) {
       		datepicker.set( 'select', date );
		}

		if ( $( '#rtb-date' ).val() === '' && !$( '.rtb-booking-form .date .rtb-error' ).length ) {

			if ( rtb_pickadate.date_onload == 'soonest' ) {
				datepicker.set( 'select', new Date() );
			} else if ( rtb_pickadate.date_onload !== 'empty' ) {
				var dateToVerify = datepicker.component.create( new Date() );
				var isDisabled = datepicker.component.disabled( dateToVerify );
				if ( !isDisabled ) {
					datepicker.set( 'select', dateToVerify );
				}
			}
		}

You need to remove that block that appears after the code you pasted so that it comes before the code you pasted. It should look like this:

if ( $( '#rtb-date' ).val() === '' && !$( '.rtb-booking-form .date .rtb-error' ).length ) {

			if ( rtb_pickadate.date_onload == 'soonest' ) {
				datepicker.set( 'select', new Date() );
			} else if ( rtb_pickadate.date_onload !== 'empty' ) {
				var dateToVerify = datepicker.component.create( new Date() );
				var isDisabled = datepicker.component.disabled( dateToVerify );
				if ( !isDisabled ) {
					datepicker.set( 'select', dateToVerify );
				}
			}
		}

		function getQueryVariable(variable)
		{
       		var query = window.location.search.substring(1);
       		var vars = query.split("&");
       		for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       		}
       		return(false);
			}

		var date = getQueryVariable( 'rtbdate' );
		if ( date !== false && typeof datepicker !== 'undefined' ) {
       		datepicker.set( 'select', date );
		}

Still no luck

Hi deranders,

Ok, I needed to move that function declaration out of the block and pass a date object. You’ll find a full working copy of booking-form.js here.

Please note that the next version of Restaurant Reservations will be arriving soon, and the javascript has been refactored a bit. Take a look at where I’ve placed getQueryVariable and you should be able to figure out the update when it happens. But feel free to come back if you have trouble.

Back on track ??

Thanks a million.