從文本框中刪除timepicker效果

Question

我已經看到上一個問題問過這個問題。但是 我不想用相同的id替換文本框。

當Timepicker在下拉timepicker選擇在文本框應使（其如預期運行）

當下拉值改變到文本框，則文本框應該爲簡單的文本處理

function ChangeType(control){ 
 
    \t if(control.value == "Time"){ 
 
     \t $("#txtInput").timepicker(); 
 
     } 
 
     else { 
 
     $("#txtInput").val(''); 
 
     \t // 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.

如果插件不附帶任何內置函數來做到這一點，你可以使用一些可能的解決方法中那。如果您不想替換原始元素，您可以嘗試刪除插件創建的所有事件處理程序和新元素。

這不是一個完美的解決方案，而是一個小小的破解。我所做的事情是因爲timepicker沒有附帶任何內置函數來取消初始化它，我正在製作該元素的副本，刪除實際元素（將插件初始化爲它），然後替換它與新的元素。

function ChangeType(control){ 
 
    \t 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 */ 
 
     \t $("#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

只有插件提供了這種方式纔可能。一個寫得好的人應該通常通過提供一種叫做銷燬的「方法」。舉例來說，在jQuery用戶界面，你可以從像這樣的元素中刪除一個datepicker：

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

如果插件沒有提供這樣做的手段，它變得有點棘手。您可以在不克隆事件和數據的情況下克隆元素，然後用克隆替換原始元素，但這在所有情況下都不太可能有效，並且確實比其他任何方法都更有效。

Answer 3

請使用jQuery的timepicker而不是引導-timepicker.js的：$('#txtInput').timepicker('hide');