JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.13/themes/base/minified/jquery.ui.base.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />


<div class="demo">
    
    <p>Date: <input id="datepicker" type="text"></p>
    
</div>

JavaScript

// Highlighted Days
var dayList = [1, 3, 5, 7, 9, 11 , 13 , 15 , 17 , 19 , 21 , 23 , 25 , 27 ];
var monthList = ["Jan", "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov","Dec"  ];

function createDays(dayList, month, year) {

    var dateArray = new Array();
    $.each(dayList, function(i, value) {
        dateArray.push(new Date(month.concat(' ', value, ', ', year)));
    });
    return dateArray;
}

function showDates(dateArray) {
    
     $.each(dateArray, function(i, value) {
        alert(value);
    });
}
$(document).ready(function() {

    var now = new Date();
    $dateArray = createDays(dayList, monthList[now.getMonth()], now.getFullYear());

    $('#datepicker').datepicker({
        beforeShowDay: function(_date) {
            
            $highLightDay = false;            
            $.each($dateArray , function(i, date) {
                if (date.valueOf() == _date.valueOf()) {                   
                  $highLightDay = true;
                }                 
            });
            
            if($highLightDay)
                return [true, "ui-state-active" ,"Event-".concat(_date)];
            
            return [true, "", ""];
        },
        onChangeMonthYear: function(year, month, inst) { 
           $dateArray = createDays(dayList, monthList[month-1], year);     
        
        }
        
    });

});