eduardolundgren/Alloy Calendar Date Range

## Alloy Calendar Date Range
<!DOCTYPE html>

<html>
<head>
	<script src="../../build/aui/aui.js" type="text/javascript"></script>

	<script src="../../src/javascript/i18n/calendar-pt-br.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../build/aui-button/assets/aui-button-core.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>

<script type="text/javascript" charset="utf-8">

AUI().use('aui-calendar',  function(A) {

	var checkDateRange = function(event) {
		var dates = this.get('dates');
		var normal = event.date.normal;
		var detailed = event.date.detailed;
		var formatted = event.date.formatted;

		var minDate = null;
		var maxDate = null;

		if (dates.length >= 2) {
			var firstSelected = dates[0];
			var lastSelected = dates[dates.length-1];

			if (A.DataType.DateMath.before(dates[0], dates[1])) {
				minDate = firstSelected;
				maxDate = lastSelected;
			}
			else {
				minDate = lastSelected;
				maxDate = firstSelected;
			}
		}

		this.set('minDate', minDate);
		this.set('maxDate', maxDate);
		this._syncMonthDays();
	};

	window.calendar1 = new A.Calendar({
		dates: [],
		setValue: true,
		selectMultipleDates: true,

		after: {
			select: function(event) {
				var instance = this;
				var dates = instance.get('dates');
				var firstSelected = dates[0];
				var lastSelected = dates[dates.length-1];

				// Checking range
				checkDateRange.call(instance, event);

				// console.log(firstSelected, lastSelected);
			}
		}
	})
	.render();

});

</script>

</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<script src="../../build/aui/aui.js" type="text/javascript"></script>

	<script src="../../src/javascript/i18n/calendar-pt-br.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../build/aui-button/assets/aui-button-core.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	</head>

	<script type="text/javascript" charset="utf-8">

	AUI().use('aui-calendar', function(A) {

	var checkDateRange = function(event) {
	var dates = this.get('dates');
	var normal = event.date.normal;
	var detailed = event.date.detailed;
	var formatted = event.date.formatted;

	var minDate = null;
	var maxDate = null;

	if (dates.length >= 2) {
	var firstSelected = dates[0];
	var lastSelected = dates[dates.length-1];

	if (A.DataType.DateMath.before(dates[0], dates[1])) {
	minDate = firstSelected;
	maxDate = lastSelected;
	}
	else {
	minDate = lastSelected;
	maxDate = firstSelected;
	}
	}

	this.set('minDate', minDate);
	this.set('maxDate', maxDate);
	this._syncMonthDays();
	};

	window.calendar1 = new A.Calendar({
	dates: [],
	setValue: true,
	selectMultipleDates: true,

	after: {
	select: function(event) {
	var instance = this;
	var dates = instance.get('dates');
	var firstSelected = dates[0];
	var lastSelected = dates[dates.length-1];

	// Checking range
	checkDateRange.call(instance, event);

	// console.log(firstSelected, lastSelected);
	}
	}
	})
	.render();

	});

	</script>

	</body>
	</html>