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:

Here is how to implement:

Put this code in the Head tag
<link rel="stylesheet" href="//"> <link rel="stylesheet" href="/resources/demos/style.css">

Put this code in the Body tag
<script src=""></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!