| <!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> |
To enable the datepicker to become a valid tab target (as in: responds to the correct tab order), set the container to be the parent of the datepicker input. Like this:
<div ref="dpWrapper">
<md-datepicker container.bind="dpWrapper" value.two-way="selectedDate" placeholder="pick a date"></md-datepicker>
</div>| <template> | |
| <div> | |
| <md-datepicker container="body" value.bind="selectedDate" label="Birthday" md-on-select.call="console.log($event)"></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> | |
| </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"); | |
| } |