JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script>
<br/>
<div style="float:left; margin-left:15px; padding-bottom: 10px; padding-top: 10px;">
<label>Show timesheets for the last</label>
<select id="dateFilterForLast">
<option value="">Please Select</option>
<option value="day">Day</option>
<option value="week">Week</option>
<option value="workweek">Work Week</option>
<option value="month">Month</option>
<option value="year">Year</option>
</select>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="float:left; padding-left:15px;">
<label for="FilterDateStartRange">Start Date</label>
<input class="date input-small" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="FilterDateStartRange" name="FilterDateStartRange" placeholder="dd/mm/yyyy" type="text" style="margin-right:10px;" />
</div>
<div style="float:left; margin-right:5px;">
<label for="FilterDateEndRange">End Date</label>
<input class="date input-small" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="FilterDateEndRange" name="FilterDateEndRange" placeholder="dd/mm/yyyy" value="20/05/2015" type="text" />
</div>
JavaScript
$(document).ready(function () {
$("#dateFilterForLast").change(function () {
var dateRange = this.value;
var d = $("#FilterDateEndRange").datepicker('getDate');
var newDate = new Date();
switch (dateRange) {
case 'day':
//set startdate minus a day
newDate.setDate(d.getDate() - 1);
$("#FilterDateStartRange").datepicker("setDate", newDate);
break;
case 'week':
//set startdate minus a week
newDate.setDate(d.getDate() - 7);
$("#FilterDateStartRange").datepicker("setDate", newDate);
break;
case 'workweek':
//set start date to start of week and end date to end of work week
var startOfWeek = moment(d).startOf('isoweek');
var endOfWeek = moment(d).endOf('isoweek').subtract(2, 'days');
var parsedStartDate = new Date(startOfWeek);
var parsedEndDate = new Date(endOfWeek);
$("#FilterDateStartRange").datepicker("setDate", parsedStartDate, {
dateFormat: 'dd/mm/yy'
});
$("#FilterDateEndRange").datepicker("setDate", parsedEndDate, {
dateFormat: 'dd/mm/yy'
});
break;
case 'month':
//set startdate minus a month
newDate.setMonth(d.getMonth() - 1);
$("#FilterDateStartRange").datepicker("setDate", newDate);
break;
case 'year':
//set startdate minus a year
newDate.setFullYear(d.getFullYear() - 1);
$("#FilterDateStartRange").datepicker("setDate", newDate);
break;
default:
...