JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/eggplant/jquery-ui.css">
<html>
    <body>
        <h1>jQuery UI Date Test</h2>
                Enter date: <input type="textbox" name="date" id='date' />
            <br><br>

            <button id="toggleDisableBtn">Toggle datepicker disabled state</button>
            <br><div id="msg">Howdy partner!</div>
</body>
</html>

CSS

h1 {color:maroon;padding:10px;}

JavaScript

$(function() {
    function msg(str) {
        $('#msg').html(str);
    }

    var isDisabled = false;
    var buttonImageUrl = 'http://www.cincyusa.com/events/calendar_popup.gif';

    $('#date').datepicker({
        buttonImage: buttonImageUrl,
        buttonImageOnly: true,
        showOn: 'button'
    });

    function toggleDisable() {
        if (isDisabled) {
            $('#date').datepicker('enable');
            isDisabled = false;
            msg('datepicker is enabled now.');
        } else {
            $('#date').datepicker('disable');
            isDisabled = true;
            msg('datepicker is disabled now.');
        }
    }

    $('#toggleDisableBtn').click(toggleDisable);
});