MaximBalaganskiy/index.html

## index.html
<!doctype html>
<html>

<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
	<div aurelia-app="src/configure">
		Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
		System.import("aurelia-bootstrapper");
	</script>
</body>

</html>

## src\app.html
<template>
	<div>
		<md-datepicker auto-close="true" container="body" value.bind="selectedDate" label="Birthday" placeholder="pick a date" year-range.bind="[2000,2005]" first-day="1"></md-datepicker>
	</div>
	<div>
		<button md-button click.delegate="setDate()">set date</button>
	</div>
	<div>
		<span if.bind="selectedDate">You selected (UTC time): ${selectedDate | stringify}</span>
	</div>
	<div style="margin-top: 15px;">
		The datepicker is initialized with 2000 - 2005 year range and Monday as the first day.
		<br/> For full options list see
		<a href="http://materializecss.com/pickers.html" target="_blank">Materialize documentation</a>. <b>Bear in mind Aurelia binding conventions, e.g. isRTL becomes is-rtl.</b>
	</div>
</template>

## src\app.ts
export class App {
	selectedDate = null;

	setDate() {
		let date = new Date();
		this.selectedDate = date;
	}
}

// tslint:disable-next-line:max-classes-per-file
export class StringifyValueConverter {
	toView(value) {
		return JSON.stringify(value);
	}
}

## src\configure.ts
export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
		.standardConfiguration()
		.developmentLogging()
		.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
		.plugin("aurelia-validation")
		.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
}
	<!doctype html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>

	<body>
	<div aurelia-app="src/configure">
	Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
	System.import("aurelia-bootstrapper");
	</script>
	</body>

	</html>
	<template>
	<div>
	<md-datepicker auto-close="true" container="body" value.bind="selectedDate" label="Birthday" placeholder="pick a date" year-range.bind="[2000,2005]" first-day="1"></md-datepicker>
	</div>
	<div>
	<button md-button click.delegate="setDate()">set date</button>
	</div>
	<div>
	<span if.bind="selectedDate">You selected (UTC time): ${selectedDate \| stringify}</span>
	</div>
	<div style="margin-top: 15px;">
	The datepicker is initialized with 2000 - 2005 year range and Monday as the first day.
	<br/> For full options list see
	<a href="http://materializecss.com/pickers.html" target="_blank">Materialize documentation</a>. <b>Bear in mind Aurelia binding conventions, e.g. isRTL becomes is-rtl.</b>
	</div>
	</template>
	export class App {
	selectedDate = null;

	setDate() {
	let date = new Date();
	this.selectedDate = date;
	}
	}

	// tslint:disable-next-line:max-classes-per-file
	export class StringifyValueConverter {
	toView(value) {
	return JSON.stringify(value);
	}
	}
	export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
	.plugin("aurelia-validation")
	.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
	}