JSFiddle - React, Tailwind, and code Playground

by Amsul

HTML

<link rel="stylesheet" href="http://amsul.ca/pickadate.js/lib/compressed/themes/default.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/lib/compressed/themes/default.date.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/lib/compressed/themes/default.time.css">
<script src="http://amsul.ca/pickadate.js/lib/picker.js"></script>
<script src="http://amsul.ca/pickadate.js/lib/picker.date.js"></script>
<script src="http://amsul.ca/pickadate.js/lib/picker.time.js"></script>
<h3><label for="datetime">Pick a date &amp; time:</label></h3>
<div id="wrap">
    <input type="text" id="datetime"/>
    <div id="hidden">
        <input type="text" id="date"/>
        <input type="text" id="time"/>
    </div>
    <div id="outlet"></div>
</div>

CSS

#wrap {
    position: relative;
}
#hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#datetime {
    position: relative;
    z-index: 10;
    margin: 0;
    padding: 4px;
    border: 1px solid #999;
    font-size: 1em;
    width: 300px;
}
body {
    padding: 20px;
}

JavaScript

var datepicker = $('#date').pickadate({
        container: '#outlet',
        onSet: function(item) {
            if ( 'select' in item ) setTimeout( timepicker.open, 0 )
        }
    }).pickadate('picker')

var timepicker = $('#time').pickatime({
        container: '#outlet',
        onRender: function() {
            $('<button>back to date</button>').
                on('click', function() {
                    timepicker.close()
                    datepicker.open()
                }).prependTo( this.$root.find('.picker__box') )
        },
        onSet: function(item) {
            if ( 'select' in item ) setTimeout( function() {
                $datetime.
                    off('focus').
                    val( datepicker.get() + ' @ ' + timepicker.get() ).
                    focus().
                    on('focus', datepicker.open)
            }, 0 )
        }
    }).pickatime('picker')

var $datetime = $('#datetime').
    on('focus', datepicker.open).
    on('click', function(event) { event.stopPropagation(); datepicker.open() })