Удалить эффект времени от текстового поля

Question

Я уже видел предыдущий вопрос, заданный для этой проблемы. Но Я не хочу заменять текстовое поле тем же идентификатором.

Когда 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 UI, вы можете удалить DatePicker из элемента, как это:

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

Если плагин не дает средства сделать это, это становится немного сложнее. Вы можете клонировать элемент без клонирования событий и данных, а затем заменять оригинал клоном, но это вряд ли будет эффективным во всех случаях и действительно является обходным решением для всего, чем что-либо еще.

Answer 3

Пожалуйста, используйте JQuery-timepicker вместо бутстраповских-timepicker.js: $('#txtInput').timepicker('hide');