Filtering a select filed using a datepicker

A demonstration of how to filter the values in a select field based upon date selection from a JQuery UI datepicker

by jezzipin

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/vader/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <label>Select date</label>
            <div class="departureDate"></div>
        </div>
        <div class="col-md-6">
            <label>Select departure</label>
            <select id="BKG_tourInstanceSelect" name="departures">
                <option data-date="01-12-2015" value="001">01-12-2015 09:00</option>
                <option data-date="01-12-2015" value="002">01-12-2015 10:00</option>
                <option data-date="01-12-2015" value="003">01-12-2015 11:00</option>
                <option data-date="01-12-2015" value="004">01-12-2015 12:00</option>
                <option data-date="01-12-2015" value="005">01-12-2015 13:00</option>
                <option data-date="02-12-2015" value="006">02-12-2015 09:00</option>
                <option data-date="02-12-2015" value="007">02-12-2015 10:00</option>
                <option data-date="02-12-2015" value="008">02-12-2015 11:00</option>
                <option data-date="02-12-2015" value="009">02-12-2015 12:00</option>
                <option data-date="02-12-2015" value="010">02-12-2015 13:00</option>
                <option data-date="02-12-2015" value="011">02-12-2015 14:00</option>
                <option data-date="08-12-2015" value="012">08-12-2015 09:00</option>
                <option data-date="08-12-2015" value="013">08-12-2015 10:00</option>
                <option data-date="09-12-2015" value="014">09-12-2015 09:00</option>
                <option data-date="09-12-2015" value="015">09-12-2015 10:00</option>
                <option data-date="20-12-2015" value="016">20-12-2015 09:00</option>
                <option data-date="20-12-2015"...

JavaScript

var availableDates = ["01-12-2015","02-12-2015","03-12-2015"];
var allOptions = $('#BKG_tourInstanceSelect option');

$(function(){
    $('.departureDate').datepicker({
    	beforeShowDay: departureDates,
    	onSelect: filterInstances,
   	 	altField: '#uniformDate',
    	altFormat: 'dd-mm-yy',
    	defaultDate: get_default_date()
	});
    
    
});

function departureDates(date) {
    // Change the format of the date for local independent comparison
    var dmy = jQuery.datepicker.formatDate('dd-mm-yy', date);
    if (availableDates.indexOf(dmy) == -1) {
        return [false];
    } else {
        return [true];
    }
}

function get_default_date() {
    var date = availableDates[0];
    date = date.split("-");
    date = new Date(date[2], date[1] - 1, date[0]);
    return date;
}

function filterInstances(date) {
    $('#Tour_Instance_Departure_Date').val(date);
    console.log("departure_date" + date);
    
    $('#BKG_tourInstanceSelect option').remove()

    // This is the date used for locale independent comparison
    var uniformDate = $('#uniformDate').val();
    console.log("uniformdate:" + uniformDate);
    var opts = allOptions.filter('[data-date="' + uniformDate + '"]');
    $.each(opts, function (i, j) {
        $(j).appendTo('#BKG_tourInstanceSelect');
    });

    $('#BKG_Next').removeClass('hidden');
}