Question

我已经看到上一个问题要求解决这个问题。但我不想用相同的ID替换文本框。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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.

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

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

＆＃13;

    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();
      }
      
    }

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果插件提供了这样做的方法，那么它才真正可行。一个写得很好的人应该通常提供一个＆＃34;方法＆＃34;叫毁灭。例如，在jQuery UI中，您可以从以下元素中删除datepicker：

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

如果插件没有提供这样做的方法，那就有点棘手了。您可以在不克隆事件和数据的情况下克隆元素，然后将原始内容替换为克隆，但这在所有情况下都不太可能有效，并且实际上是一种黑客解决方法。

Answer 3

请使用jquery-timepicker而不是bootstrap-timepicker.js：export GOOGLE_MAPS_API_KEY="AIza.............................." rails s

从文本框中删除时间戳效果

3 个答案: