JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<p>Date: <input type="text" id="datepicker"></p>
JavaScript
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
maxDate: new Date,
minDate: new Date,
firstDay: 1
});
// Highlight week on hover week number
$(document).on("mouseenter",".ui-datepicker-week-col",
function(){$(this).siblings().find("a").addClass('ui-state-hover');} );
$(document).on("mouseleave",".ui-datepicker-week-col",
function(){$(this).siblings().find("a").removeClass('ui-state-hover');} );
// Select week on click on week number
$(document).on("click",".ui-datepicker-week-col",
function(){
$first = $(this).siblings().find("a").first();
$last = $(this).siblings().find("a").last();
$first.click();
$parentFirst = $first.parent();
$parentLast = $last.parent();
$("#datepicker").val(
(Number($parentFirst.data("month"))+1)+"/"+$first.text()+"/"+$parentFirst.data("year")
+ " - " +
(Number($parentLast.data("month"))+1)+"/"+$last.text()+"/"+$parentLast.data("year")
);
});
});