JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js"></script>
Select Week: <input id="selectWeek">
JavaScript
//replace selectWeek with your date pickers id here at all places
$(function() { //this is onload
$("#selectWeek")
.datepicker(
{
firstDay : 1, // set first day of week as monday
changeMonth : true, // provide option to select Month
changeYear : true, // provide option to select year
showButtonPanel : true, // button panel having today and done button
onClose : function(dateText, inst) {
if ($(this).val() == "") {
return;
}
// below code will calculate the monday and set it in input box
var fromDate = $("#selectWeek").datepicker("getDate");
var date = fromDate.getDate();
var month = fromDate.getMonth() + 1;// +1 as jan is 0
var year = $(
"#ui-datepicker-div .ui-datepicker-year :selected").val();
if (fromDate.getDay() != 1) { // if not monday
if (fromDate.getDay() == 0) {// if sunday
date = date - 6;
} else {
date = date + (-fromDate.getDay() + 1);
}
}
var dateStr = month + "/" + date + "/" + year;
$(this).val(dateStr);
$(this).blur();// remove focus input box
},
duration : 0,
onChangeMonthYear : function() {
setTimeout("applyWeeklyHighlight()", 100);
},// applyWeeklyHighlight is below
beforeShow : function() {
setTimeout("applyWeeklyHighlight()", 100);
}
});
});//end of onload
/**
* Set highhlight on the week on hover.
*/
function applyWeeklyHighlight() {
$('.ui-datepicker-calendar tr').each(function() {
...