<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> </script> <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"> </script> </head> <body> <div id="datetimepicker" class="input-append date"> <input type="text" readonly="readonly"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <div class="input-append"> <span id="bb" style="display: none;"> <input class="span2" id="appendedInput" type="text" style="width: 180px;"> <span class="add-on" style="cursor: pointer;" onclick="kk()">X</span></span> <input id="aa" type="text"> </div> <script type="text/javascript"> $('#datetimepicker').datetimepicker({ format : 'MM/dd/yyyy hh:mm', language : 'en', pickDate : true, pickTime : true, hourStep : , minuteStep : , secondStep : , inputMask : true }); $("#aa").keyup(function(){ var i = $("#aa").val().trim(); if(i!=""){ $("#bb").show(); $("#appendedInput").focus(); $("#appendedInput").val(i); $("#aa").hide(); $("#aa").val(""); } }) function kk(){ $("#appendedInput").val(""); $("#bb").hide(); $("#aa").show(); $("#aa").focus(); } </script> </body> </html>