JSFiddle - React, Tailwind, and code Playground

by kshep92

HTML

<button id=toggle>Pick date</button>

<input type=text id=display readonly />

<div id=date></div>

CSS

#toggle {
  display: inline-block;
  border: 0;
  background: none;
}

#date { display: none; }

#toggle:hover { text-decoration: underline; }

#display { border: none; background: none; display: none; }

/*#date { display: none; }*/

JavaScript

(function() {
	$(document).ready(function() {
		var $dateField = $("#date");  
    var $toggle = $("#toggle");
    var displayField = $("#display");
    $dateField.datepicker(
    {
    	dateFormat: 'yy-mm-dd',
      altField: '#display',
      altFormat: 'D, d MM, yy',
    	onSelect: function(date, dp) {
      	console.log(date);
        if(date != '') {
        	$toggle.text(date);
         }
        $(this).hide();
      }
    });
    
    $toggle.on('click', function() {
    	var date = $dateField.show();
    });
  } );
})();