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”