enable/disable datepicker with dropdown asp.net

Question

i have dropdown for selecting data type of data in a textbox. dropdown options are like integer, decimal,string,date.

everything is working fine except one thing that is am unable to get a datepicker to the text box when dropdown is selected to date.

tried something like but failed to achieve

$(function () {
            $(".date1").datepicker({
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1

            });
        });

$("#<%=ddlDataType.ClientID %>").change(function () {
            if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date") {
                $("#<%=txtDefaultValue.ClientID%>").prop("class", "date1");
            }
            else {
                $("#<%=txtDefaultValue.ClientID%>").prop("class", "");
            }
        });

what is the possible way to achieve this.

Answer 1

If you want to remove it (keep it enable for other purpose) then you can use destroy method

$("#<%=txtDefaultValue.ClientID%>").datepicker("destroy");

else

You can set option enable and disable, on change event of ddlDataType drowndown list.

$("#<%=txtDefaultValue.ClientID%>").datepicker('enable');

$("#<%=txtDefaultValue.ClientID%>").datepicker('disable');

alternative you can also set options to enable disable datepicker

//To enable

$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", false );

//To disable

$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", true );

Answer 2

If you just want your datepicker to be shown or hidden, you can try this code (assuming you are using jQuery).

    if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date") 
    {
              $(".date1").css("display", "block");
    }
    else {
              $(".date1").css("display", "none");
    }