jQuery: Start Date and End Date

We commonly see on websites some input fields that would require us to enter a date range.

This means we should be able to select a start date and end date.

Of course, start date should always be before the end date and the end date should always be later than the start date.

Being a Tech Noob, I have no idea how to do this, especially since web programming isn't really my forte.

Fortunately, a lot of helpful tips can be found online!

Here's one.

We need the following:

1. jQuery Library
2. jQuery UI
3. jQuery CSS

HTML

<input type="text" id="start_date">
<input type="text" id="end_date">

Javascript

$(function() {
 $("#start_date").datepicker({
  onSelect: function(selected){
   $("#end_date").datepicker("option","minDate", selected)
        }

 });
 $("#end_date").datepicker({
  onSelect: function(selected) {
   $("#start_date").datepicker("option","maxDate", selected)
        }

 });
});

FIDDLE

Let me know if you have other better ways in mind. (: