Streaming live at 10am (PST)

Linked Date Pickers with JQuery

I was searching for a way to implement linked date pickers for a website I’m building for a campground that takes reservations.

Everything I came across wasn’t exactly what I needed, so after figuring it out I thought I would share for anyone looking for something like this in the future.

Here is the example website:

Here is my read only link:
https://preview.webflow.com/preview/moabupthecreek?utm_source=moabupthecreek&preview=7599d1a2d51bbe00e5c9c7c52c350ff6

Here is how to implement:

Put this code in the Head tag
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css">

Put this code in the Body tag
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { var dateFormat = "mm/dd/yy", from = $( "#from" ) .datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2, maxDate: "11/03/2019", minDate: "today", showButtonPanel: true, defaultDate: "", }) .on( "change", function() { to.datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 2 }) .on( "change", function() { from.datepicker( "option", "maxDate", getDate( this ) ); }); function getDate( element ) { var date; try { date = $.datepicker.parseDate( dateFormat, element.value ); } catch( error ) { date = null; } return date; } } ); </script>

Change your class to “datepicker” for the text field

Change the ID for the first one to “from” and the second one to “to”

1 Like

@parkerwest - Thanks for sharing!

1 Like

hey man, is this still a working piece of code? Seems your Preview link isn’t available any longer.

It appears what you’ve shared is pretty close to what I’m looking for, though my need is that a customer can pick 3 individual dates.

Hey Matt,

I actually am no longer using a date picker in this project but to update this thread I just made a simple project to shows date picker examples. I made one for 3 individual dates using a new date picker code I found that looks nice and works better than this one.

Here’s where you can see all the different attributes for customizing the picker.

Here’s the read only link and if you have any questions I’ll try my best to answer them!

Here’s the live project to test.