JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/js/jqueryui-editable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/css/jqueryui-editable.css">
<div class="week-picker">
</div>
Current week:
<span id="startDate">No Start Date</span> -
<span id="endDate">No End Date</span>
JavaScript
var startDate;
var endDate;
var selectCurrentWeek = function (where) {
console.log(where);
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
}, 1);
}
$('.week-picker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
selectCurrentWeek("week-picker");
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek("change");
}
});
$(document).on('mousemove', '.week-picker .ui-datepicker-calendar tr', function () { $(this).find('td a').addClass('ui-state-hover'); });
$(document).on('mouseleave', '.week-picker .ui-datepicker-calendar tr', function () { $(this).find('td a').removeClass('ui-state-hover'); });