SO - 29364262

by Sukanya Halder

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="pull-left" style="margin-left:150px">
    <select class="form-control pull-left" name="searchby" id="searchby">
        <option class="label">- Search by -</option>
        <option value="name">Name</option>
        <option value="address">Address</option>
        <option value="date">Date</option>
    </select>
</div>
<div class="pull-right" style="margin-left:10px">
    <div class="input-group date col-sm-12">
        <input type="text" class="form-control" placeholder="Search " name="key_key" id="key_key" required />
        <div class="input-group-btn">
            <button class="btn btn-md" type="submit"><span class="fa fa-search">Search</span>
            </button>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    //$('#key_key').datepicker();
 $('#searchby').on('change', function () {
        if (this.value == "date") {            
            $('#key_key').datepicker();
        } else {
            $('#key_key').datepicker("destroy");
        }
    });   
});