JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

  <div class="form-group">
    <label for="date" class="col-md-2 control-label">Date
        &nbsp;
    </label>
    <div class="col-md-10">
      <textarea class="form-control" id="date" name="date" rows="1">2018-12-21</textarea>
			<!-- <input type="text" id="date" name="date" value="2018-12-21"> -->
    </div>
  </div>
	
<div class="example-container">
<p>Format the time:</p>
	<div>
	<input type="text" name="basic_example_3" id="basic_example_3" value="" />
</div>

CSS

@import url("https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css");
@import url("https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css");

JavaScript

today=$("#date").val()
$("#date").replaceWith( "<input type='text' class='form-control' id='date' name='date' value="+today+">" );

$('#date1').datepicker({
    dateFormat: "yy-mm-dd"
});

$('#date').datepicker({
    dateFormat: "yy-mm-dd"
});

$('#basic_example_3').datetimepicker({
  dateFormat: "yy-mm-dd",
	timeFormat: "HH:mm:ss"
});