JSFiddle - React, Tailwind, and code Playground

by grappler

HTML

<!-- jQuery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
        <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js"></script>
        <!--[if IE]><script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
        <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
        <link rel="stylesheet" type="text/css" media="screen" href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css">

                        <form name="chooseDateForm" id="chooseDateForm" action="#">
                                <fieldset>
                                        <legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="d">Date</label>
                            <select name="d" id="d" style="width: 170px">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option...

JavaScript

$(function() {

    // initialise the "Select date" link
    $('#date-pick').datePicker(
    // associate the link with a date picker
    {
        createButton: false,
        minDate: 0,
        maxDate: '+2Y'
    }).bind(
    // when the link is clicked display the date picker
    'click', function() {
        updateSelects($(this).dpGetSelected()[0]);
        $(this).dpDisplay();
        return false;
    }).bind(
    // when a date is selected update the SELECTs
    'dateSelected', function(e, selectedDate, $td, state) {
        updateSelects(selectedDate);
    }).bind('dpClosed', function(e, selected) {
        updateSelects(selected[0]);
    });

    var updateSelects = function(selectedDate) {
        var selectedDate = new Date(selectedDate);
        $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
        $('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr('selected', 'selected');
        $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
    };
    // listen for when the selects are changed and update the picker
    $('#d, #m, #y').bind('change', function() {
        var d = new Date(
        $('#y').val(), $('#m').val() - 1, $('#d').val());
        $('#date-pick').dpSetSelected(d.asString());
    });

    // default the position of the selects to today
    var today = new Date();
    updateSelects(today.getTime());

    // and update the datePicker to reflect it...
    $('#d').trigger('change');
});