JSFiddle - React, Tailwind, and code Playground

by Sanal S

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div>
  Date:
  <input type="text" id="datepicker">
</div>
<div id="days">

</div>

<div class="perday" id="perday0">
  <label id="day0"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday1">
  <label id="day1"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday2">
  <label id="day2"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday3">
  <label id="day3"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday4">
  <label id="day4"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday5">
  <label id="day5"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input type="radio" name="session" value="Evening"> Evening
</div>
<div class="perday" id="perday6">
  <label id="day6"></label>
  <input type="radio" name="session" value="Morning"> Morning
  <input type="radio" name="session" value="AfterNoon"> AfterNoon
  <input...

CSS

label {
  width: 100px;
  display: inline-block
}

JavaScript

//$(".perday").hide();
var dateObject;
var day;
$("#datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: datesetter
});

function datesetter() {
  dateObject = $(this).datepicker('getDate');
  day = getWeeksDays(dateObject.getDay());
  var count = 0;
  while (count < 7) {
    var newDate = dateObject.setDate(dateObject.getDate() + (count + 7));
    $('#day' + count).text(getWeeksDays((dateObject.getDay() + count) % 7));
    $('#perday' + count).attr('date', newDate);
    count++;
  }
}

function getWeeksDays(this_day) {
  switch (this_day) {
    case 0:
      return 'Sunday';
      break;
    case 1:
      return 'Monday';
      break;
    case 2:
      return 'Tuesday';
      break;
    case 3:
      return 'Wednesday';
      break;
    case 4:
      return 'Thursday';
      break;
    case 5:
      return 'Friday';
      break;
    case 6:
      return 'Saturday';
      break;
    default:
      return 'INVALID';
      break;
  }
}