JSFiddle - React, Tailwind, and code Playground

by A Wells

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
<body>
    <input id="datepick" type="text" size="10" maxlength="8" placeholder="mm/dd/yyyy">
    </input>
    <input id="dp-month" type="text" size="2" maxlength="2" placeholder="mm">
    </input><span>/</span>
    <input id="dp-day" type="text" size="2" maxlength="2" placeholder="dd">
    </input><span>/</span>
    <input id="dp-year" type="text" size="4" maxlength="4" placeholder="yyyy">
    </input>
    <input id="dp-hide" type="text" size="8" style="display: none;"></input>
</body>

JavaScript

jQuery(document).ready(function() {
    $('#datepick').datepicker({showOn: 'button', buttonText: 'cow'});
    $('#datepick').mask('99/99/9999', {placeholder:" "});
    
    $('#dp-month').mask('99',{placeholder:" ", completed: function() { $('#dp-day').focus(); }});
    $('#dp-day').mask('99',{placeholder:" ", completed: function() { $('#dp-year').focus(); }});
    $('#dp-year').mask('9999',{placeholder:" ", completed: function() { var date = $('#dp-month').val() + '/' + $('#dp-day').val() + '/' + $('#dp-year').val(); console.log(date); $('#dp-hide').datepicker("setDate", date); console.log($('#dp-hide').datepicker("getDate"));}});
    $('#dp-hide').datepicker({showOn: 'button', buttonText: "<span>cow</span>", minDate: 0});
});