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

Question

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

当在下拉列表中选择时间选择器时 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:'77'
    }

<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

只有插件提供了这样做的方法，这才有可能。一个写得很好的应该，通常通过提供一个 "method" 调用销毁。例如，在 jQuery UI 中，您可以像这样从元素中删除日期选择器：

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

如果插件不提供执行此操作的方法，它会变得有点棘手。您可以在不克隆事件和数据的情况下克隆元素，然后将原始元素替换为克隆元素，但这不太可能在所有情况下都有效，而且实际上是一种比其他任何方法都重要的 hack 解决方法。

Answer 2

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:'77'
    }

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

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

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

Remove timepicker effect from textbox

html

javascript

jquery

bootstrap-timepicker