javascript - 从文本框中删除时间选择器效果

Question

我已经看到了针对这个问题的上一个问题。但我不想用相同的 id 替换文本框。

在下拉列表中选择 Timepicker 时，timepicker应在文本框中启用（按预期运行）

当下拉值更改为文本框时，文本框应视为简单文本

    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>

现场演示

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.

如果插件没有任何内置函数来执行此操作，那么这是您可以使用的少数几种可能的解决方法之一。如果您不想替换原始元素，可以尝试删除插件创建的所有事件处理程序和新元素。

这不是一个完美的解决方案，而是一个小技巧。我正在做的是因为时间选择器没有任何内置函数来取消初始化它，我正在制作该元素的副本，删除实际元素（已将插件初始化为它），并替换它与新元素。

    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

只有插件提供了这样做的方法，这才是真正可能的。一个写得很好的应该，通常是通过提供一个叫做destroy的“方法”。例如，在 jQuery UI 中，您可以像这样从元素中删除日期选择器：

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

如果插件不提供这样做的方法，它会变得有点棘手。您可以在不克隆事件和数据的情况下克隆元素，然后用克隆替换原始元素，但这不太可能在所有情况下都有效，并且确实是一种黑客解决方法，而不是其他任何方法。

Answer 3

请使用 jquery-timepicker 而不是 bootstrap-timepicker.js：$('#txtInput').timepicker('hide');