date picker demo

by Nikita Jadhao

HTML

<div id="header">
			<h2><br/>Select a Destination</h2>
		</div>
        <div class="left">
            <p>Departing: <input type="text" id="departing"></p>
        </div>
        <div class="right">
            <p>Returning: <input type="text" id="returning"></p>
        </div><br/>
        <div id="main">
        	<p>Destination: <select id="dropdown">
				<option value="newyork">New York</option>
				<option value="london">London</option>
				<option value="beijing">Beijing</option>
				<option value="moscow">Moscow</option>
			</select></p>
			<button>Submit</button>
        </div>

CSS

<div id="header">
			<h2><br/>Select a Destination</h2>
		</div>
        <div class="left">
            <p>Departing: <input type="text" id="departing"></p>
        </div>
        <div class="right">
            <p>Returning: <input type="text" id="returning"></p>
        </div><br/>
        <div id="main">
        	<p>Destination: <select id="dropdown">
				<option value="newyork">New York</option>
				<option value="london">London</option>
				<option value="beijing">Beijing</option>
				<option value="moscow">Moscow</option>
			</select></p>
			<button>Submit</button>
        </div>

JavaScript

$(document).ready(function() {
    $("#departing").datepicker();
    $("#returning").datepicker();
    $("button").click(function() {
    	var selected = $("#dropdown option:selected").text();
        var departing = $("#departing").val();
        var returning = $("#returning").val();
        if (departing === "" || returning === "") {
			alert("Please select departing and returning dates.");
        } else {
			confirm("Would you like to go to " + selected + " on " + departing + " and return on " + returning + "?");
        }
    });
});