JSFiddle - React, Tailwind, and code Playground

by Daniels Jirgensons

HTML

<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
       <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
        
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
			<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
			<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    
<div id="container">
<div class="my-example">
  <input id="" placeholder="press to show calendar" class="input">
  <div class="dropdown">
    <div class="datetimepickerinline">
    </div>
</div>
</div>

</div>

CSS

#container{
  width:300px
}

#container input{
  width:100%;
}

.my-example{
  position:relative;
}

.my-example .dropdown{
  display:none;
    width: 200px;
    background: lightblue;
    position: absolute;
    top: 0;
    right: -200px;
}

.my-example input.input:focus + .dropdown{
  display:block;
}

JavaScript

$(function () {
	$('.datetimepickerinline').datetimepicker({
      inline: true
  });
  $('.datetimepickerinline').on('change dp.change', function(e){
    $('input').val($(this).data('date'));
  });
});