JSFiddle - React, Tailwind, and code Playground

by Mikal Grant

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<input type="text" id="tbDate" class="datepicker" value="2017-01-18" />

JavaScript

$(document).ready(
  function() {

    //GET THE DATE FROM THE TEXT BOX
    var placeholder = $("#tbDate").val();
    //MAKE A DATE FROM THE TEXT BOX VALUE
    d = new Date(placeholder);

    //MAKE THE TEXT BOX A DATE PICKER
    $(".datepicker").datepicker({
      minDate: x(d), //SET THE MIN ALLOWED DATE FOR YOUR DATE PICKER
      maxDate: y(d), //SET THE MAX ALLOWED DATE FOR YOUR DATE PICKER
      numberOfMonths: 2,
      beforeShowDay: $.datepicker.noWeekends,
      dateFormat: 'yy-mm-dd'
    });
  });

//FIND THE DAYS OF WEEK DESIRED FOR THE WEEK OF GIVEN DATE  
function x(d) {
  var date = new Date(d);
  if (date.getDay() > 0) {
    date.setDate(date.getDate() - (date.getDay() - 1));
    return date;
  } else {
    return date;
  }
}

function y(d){
  var date = new Date(d);
  if (date.getDay() < 6) {
    date.setDate(date.getDate() + ((6 - date.getDay())));
    return date;
  } else {
    return date;
  }
}