Date of birth selector

Hi stuart. I didnt realize the email I sent you went to a dead end. The code I would like to apply is 

$(’.datepicker’).pickadate({

 selectYears: true,

 selectMonths: true

})

And it should look something like

hi stuart, 

by any chance did you get to help me with this? Im in desperate need of it. Thanks a lot

Hi Oscar, 

Apologies for the delay I’ve been off work for a while with a fractured skull, I’ll get to look at this later for you, in the meantime thanks for the update on you posts. 

Could you post me a link to the landing page that you’re looking to integrate this into and we’ll get cracking and move this forwards for you.

Cheers

S.

Lol thanks Joe, though I’m sure it more equates to “don’t let clumsy people dance at weddings”! 🙂

Hi Oscar,

I’ve got one sorted for you, it’s not exactly the same layout as you wanted, it uses a drop down box in the date picker popup for year, can you take a look and tell me if this will work for you or if you want me to look into something different. 

Example is here, it’s number 4…

https://unbouncepages.com/stuart-examples/

If you’re happy with that let me know and I can give you step by step instructions.

Cheers

Stuart.

Hi Oscar,

Here we go then…

First off go to edit your page that you want the date picker on and go to the section which says “Javascript” (bottom of the edit window) then choose to “Add a new script”, name it whatever you like, but I called it JQueryUI 1.11.4 so I know exactly whats in there. You then need to paste the following line of code: 

That will pull the latest jqueryui library into your page and make it available for use. Make sure you select to place it in the HEAD section from the drop down list.

Next up click the Add button on the left hand side as we need another script, we can’t put this in the same one as we want to add this before the BODY close tag, that’s important.

Please call it something like “Jquery UI DatePicker” and add the following lines of code:

Problem with this is it’s very ugly without a stylesheet. (We could embed the Google stylesheet into this code and it would work throws us an unbounce error that can be ignored, but it still works). I don’t like errors however, as they always come back to bite you and that’s not how Unbounce is setup to use custom stylesheets that are externally hosted.

So save what you’ve done and go back to the main editor screen and click on “Stylesheets” choose "add a new stylesheet and paste this little lot inside please:

Again Save this with something you’ll remember what it is, I used JQuery UI Styles. Strictly speaking don’t need all of these styles just for your date picker but if you decide to use other things from JQuery UI at least you know they are not going to look like a load of rubbish.

Save --> Publish --> Test and let me know if this works it out for you.

Cheers

Stuart.

Hi Oscar,

Yeah that’s an easy tweak, in the jquery datepicker function you just need to add one more parameter. Please add the line below…

yearRange: “-100:-16”,

Please put that above the line that says…

changeMonth: true,

That should sort you out, it will mean people need to be over 16 years old and under 100. You can change those to suit and only those years will become available.

Hope that helps.

S.

Stuart, 

Very sorry to hear about the injury, my friend! We’re sending a care package your way, hope it helps. :) 

I have been struggling with this date picker myself and managed to set it up. However there’s one major showstopper …

Once I click to select the date it doesn’t close. As in your example, Stuart - the date picker blocks my button… 

Does anyone know how to fix this? 

Hello,  This is create help…as I was able to also make i work for me.  

The only thing, not sure if you are able to help…As I am using it, for “Departure” & “Arrival” dates…for departure, I dont want them to have access previous days, only current date.  

And for Arrival dates, they can only pick from the next day (of current day)…?

Waiting to hear from you…regards,
G