根据选定的下拉值从文本字段中添加或删除日期选择器

Question

I have a form used to search data. On that form I have a textbox , a dropdown list , and a search button . In my dropdown , I have options:

• check in date
• last name
• reservation id

I want to add a datepicker to the textbox , but only when "check in date" has been selected.

Once the datepicker is added to the textbox - I can't remove it. How can I remove the datepicker when the other options have been selected?

This is my jquery

$('#list').change(function() {
  var selected = $(this).val();

  if(selected == 2) {
    $('#text').datepicker({ dateFormat: 'yy-mm-dd' });
  } else {
    $('#text').prev().val(''); //here , need to remove the date picker 
  } 
});

Answer 1

Ok when the another option is selected you can use the .datepicker( "destroy" ) function to remove it.

example:

if(selected == 2) {
    $('#text').datepicker({ dateFormat: 'yy-mm-dd' });
  } else {
    $('#text').prev().val('');

    // first test if it exist...example you can set a property then if true destroy it.
    $('#text').datepicker("destroy");
  }