JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="datetime">
  <span class="datetime-icon fa fa-calendar"></span>
  <input class="datetime-input" placeholder="2016-03-21 11:00" readonly>
</div>

<div class="datetime-calendar">
  
</div>

CSS

.datetime {
  position: relative;
}

.datetime-input {
  font-size: 2ch;
  text-indent: 2ch;
  width: 16ch
}

.datetime-icon { 
  position: absolute;
  top: 0.5ch;
  left: 0.5ch;
  font-size: 2ch;
}

.datetime-calendar {
  /*display: none;*/
}

JavaScript

function addControl(ele) {
	var input = ele.querySelector('.datetime-input');
	var dp = document.createElement('input');
  dp.type = 'date';
  dp.css.display = 'none';
  dp.css.position = 'absolute';
  dp.css.top = input.clientHeight + 2;
  dp.css.zIndex = 9999999;
  ele.appendChild(dp);
  
  input.onclick = function() {
  	dp.css.display = 'inline';
  }
}

var objects = document.querySelectorAll('.datetime');
for (var i in objects) {
	addControl(objects[i]);
}