JSFiddle - React, Tailwind, and code Playground

by Seandeburca

HTML

<title>datepicker demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<body>
 
    <label for="datepicker">Datepicker : </label><input id="datepicker" />
    <br>
 <label for="result
 ">Result : </label><input type="text" id="result" />
<p>Course: </p><span id="course"></span>


</html>

JavaScript

var input = $("#datepicker");
var result = $("#result");

var courses = {

    "02-09-2013" : "history",
    "10-09-2013": "physics"
};

input.datepicker({
    dateFormat: 'dd-mm-yy',
    showWeek: true,
    firstDay: 1,
    numberOfMonths: 3, 
    onSelect: function(dateText, pickerObj){
        result.attr("data-course-id", courses[dateText]); 
        course.innerHTML = courses[dateText]; 
    },
    altField: "#result"
});