Set The Data Range With jQuery - set-date-range.js

This is a very small yet useful jQuery plugin allows the user to quickly set the date ranges (Today, This Week, This Month) for the input fields. Great for date picker component that enables the user to select the pre-defined date ranges without manual operation.

How to use it:

1. Insert the JavaScript file jquery.set-date-range.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.set-date-range.js"></script>

2. Create the input fields and selection buttons on the webpage:

<input type="text" id="start_date">
<input type="text" id="end_date">
<button id="btn_today">Today</button>
<button id="btn_week">This week</button>
<button id="btn_month">This month</button>

3. The JavaScript to active the plugin.

$('#btn_today').setDateRange({
  type: 'today',
  from: '#start_date',
  to: '#end_date'
});

$('#btn_week').setDateRange({
  type: 'week',
  from: '#start_date',
  to: '#end_date'
});

$('#btn_month').setDateRange({
  type: 'month',
  from: '#start_date',
  to: '#end_date'
});

---

This awesome jQuery plugin is developed by chan15. For more Advanced Usages, please check the demo page or visit the official website.