Datepicker doesn't hide

Question

i have i select like this:

<form:select path="critere" >
    <option value="0">Selectionner ...</option> 
    <option value="1">nom</option> 
    <option value="2">prénom</option> 
    <option value="3">cin</option> 
    <option value="4">date declaration perte</option> 
    <option value="5">date duplicata</option> 
    <option value="6">annexe administratif</option> 
</form:select>

with ajax call:

$( "#formSearch select" ).change(function() {         
    if( $("#formSearch select ").val() == 4 || $("#formSearch select ").val()==5 )
        $( "#formSearch input[type='text']" ).datepicker();
});

the problem is when i choose for the first time value 4 or 5 it's show me the calendar but after this when i choose value 1 or 2 it's show me the calendar again, so how to disable it ?

Answer 1

You have to remove datepicker when values 4 or 5 aren't selected. Remove it in else block like this:

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

There's an example in this fiddle.