JSFiddle - React, Tailwind, and code Playground

by Gunjal Ray

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<link rel="stylesheet" href="  https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css">
<select name="" id="cmbList" onchange="ChangeType(this)">
   <option value="Text">Textbox</option>
   <option value="Time">Timepicker</option>
</select>
<br><br><br>
<div class="input-group bootstrap-timepicker timepicker">
  <input id="txtInput" type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>

CSS

.input-group-addon:after{
  content:'\0777'
}

JavaScript

function ChangeType(control){
	if(control.value == "Time"){
  	$("#txtInput").timepicker();
  }
  else {
    $("#txtInput").val('');
  	// I want to removfwe timepicker from textbox
  }
  
}