MaximBalaganskiy · May 21, 2018 03:39
diff --git a/index.html b/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>
diff --git a/src\app.html b/src\app.html
 <template>
 	<div>
 		<p style="margin-top: 15px;">
 			<button md-button click.delegate="openModal()">show modal</button>
 		</p>
 		<br>
 		<code>container</code> property specifies the host of the picker dialog. You can either bind to an element or pass a <code>querySelector</code> parameter.
 	</div>
 	<div md-modal id="mm" md-modal.ref="modal">
 		<div class="modal-content">
 			<h4>Datepicker modal</h4>
 			<div>
 					<md-datepicker container="body" value.bind="selectedDate" label="Birthday" placeholder="pick a date"></md-datepicker>
 					<md-datepicker value.bind="selectedDate" label="Birthday" placeholder="pick a date"></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>
 		<div class="modal-footer">
 			<a click.delegate="agree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Agree</a>
 			<a click.delegate="disagree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Disagree</a>
 		</div>
 	</div>
 </template>
diff --git a/src\app.ts b/src\app.ts
 import { autoinject } from "aurelia-framework";
 import { MdToastService, MdModal } from "aurelia-materialize-bridge";

 @autoinject
 export class App {
 	selectedDate = null;
 	modal: MdModal;

 	constructor(private toast: MdToastService) {
 	}

 	agree(e) {
 		this.toast.show("You agreed!", 4000);
 	}

 	disagree(e) {
 		this.toast.show("You disagreed!", 4000);
 	}

 	openModal() {
 		this.modal.open();
 	}

 	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);
 	}
 }
diff --git a/src\configure.ts b/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>
	<p style="margin-top: 15px;">
	<button md-button click.delegate="openModal()">show modal</button>
	</p>
	<br>
	<code>container</code> property specifies the host of the picker dialog. You can either bind to an element or pass a <code>querySelector</code> parameter.
	</div>
	<div md-modal id="mm" md-modal.ref="modal">
	<div class="modal-content">
	<h4>Datepicker modal</h4>
	<div>
	<md-datepicker container="body" value.bind="selectedDate" label="Birthday" placeholder="pick a date"></md-datepicker>
	<md-datepicker value.bind="selectedDate" label="Birthday" placeholder="pick a date"></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>
	<div class="modal-footer">
	<a click.delegate="agree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Agree</a>
	<a click.delegate="disagree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Disagree</a>
	</div>
	</div>
	</template>
	import { autoinject } from "aurelia-framework";
	import { MdToastService, MdModal } from "aurelia-materialize-bridge";

	@autoinject
	export class App {
	selectedDate = null;
	modal: MdModal;

	constructor(private toast: MdToastService) {
	}

	agree(e) {
	this.toast.show("You agreed!", 4000);
	}

	disagree(e) {
	this.toast.show("You disagreed!", 4000);
	}

	openModal() {
	this.modal.open();
	}

	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");
	}