Remove timepicker effect from textbox

Question

I have already seen the previous question asked for this problem. But i don't want to replace the textbox with same id.

When Timepicker is selected in dropdown timepicker should enable in textbox(which is run as expected)

When dropdown value changes to Textbox then the textbox should treated as simple text

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<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>

Live Demo

Answer 1

I have already seen the previous question asked for this problem. But i don't want to replace the textbox with same id.

That's among the few possible workarounds you can use if the plugin doesn't come with any built-in function to do this. You can try removing all the event handlers and new elements the plugin creates if you don't want to replace the original element.

This is not a perfect solution but a small hack. What I'm doing is since the timepicker doesn't come with any built in function to de-initialize it, I'm making a copy of that element, removing the actual element ( which has the plugin initialized to it ), and replacing it with the new element.

    function ChangeType(control){
     if(control.value == "Time"){
        /* getting outer html of the input and its next element ( button which brings up the timepicker ) */
        var elem = $("#txtInput").get(0).outerHTML;
        var elem_next = $("#txtInput").next().get(0).outerHTML;

        /* adding temporary class to identify original input */
        $("#txtInput").addClass('remove-this-now');

        /* removing the button next to the input */
        $('.remove-this-now').next().remove();
        $('.remove-this-now').after(elem + elem_next);

        /* removing the input */
        $('.remove-this-now').remove();

        /* initializing timepicker to new input */
       $("#txtInput").timepicker();
      }
      else {
        $("#txtInput").val('');

        /* getting outer html of the input and its next element ( button which brings up the timepicker ) */
        var elem = $("#txtInput").get(0).outerHTML;
        var elem_next = $("#txtInput").next().get(0).outerHTML;

        /* adding temporary class to identify original input */
        $("#txtInput").addClass('remove-this-now');

        /* removing the button next to the input */
        $('.remove-this-now').next().remove();
        $('.remove-this-now').after(elem + elem_next);

        /* removing the input */
        $('.remove-this-now').remove();
      }
      
    }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<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>

Answer 2

It's only really possible if the plug-in provides a means of doing so. A well-written one should, usually by providing a "method" called destroy. For instance, in jQuery UI, you can remove a datepicker from an element like this:

$("selector").datepicker("destroy");

If the plug-in doesn't provide a means of doing it, it gets a bit tricky. You could clone the element without cloning events and data, and then replace the original with the clone, but that's unlikely to be effective in all cases and really is a hack workaround more than anything else.

Answer 3

Please use jquery-timepicker instead of bootstrap-timepicker.js: $('#txtInput').timepicker('hide');