Start Date - End Date

by Aya Alao

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<input type="text" id="start_date">
<input type="text" id="end_date">

CSS

.ui-datepicker{
	font-family: Droid Sans;
	font-size: 14px;
	background: #fff;
	box-shadow: 1px 1px 5px #bdbdbd;
}
.ui-datepicker-header{
	color: #fff;
	background: #d72a2c;
	border: 0px;
}
.ui-datepicker-title{
	font-size: 16px;
}
.ui-state-default:hover
, .ui-widget-content .ui-state-default:hover
, .ui-widget-header .ui-state-default:hover{
	font-weight: bold;
	background: #ffbbbc;
}
.ui-datepicker-prev:hover
,.ui-datepicker-next:hover{
	background: none;
	border: 0;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
	top: 30%;
	margin-top: 0;
}
.ui-state-default
, .ui-widget-content .ui-state-default
, .ui-widget-header .ui-state-default
, .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight{
	border:0;
	background: #fff;
	color: #494949;
	font-weight: normal;
}
.ui-state-active
, .ui-widget-content .ui-state-active
, .ui-widget-header .ui-state-active{
	border:0;
	background: #d72a2c;
	color: #fff;
	font-weight: bold;
}

JavaScript

$(function() {
	$("#start_date").datepicker({
		onSelect: function(selected){
			$("#end_date").datepicker("option","minDate", selected)
        }

	});
	$("#end_date").datepicker({
		onSelect: function(selected) {
			$("#start_date").datepicker("option","maxDate", selected)
        }

	});
});