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">
<input md-datepicker="container.bind: dpWrapper; value.two-way: selectedDate;" type="date" placeholder="pick a date" />
</div>| <template> | |
| <div> | |
| <input md-datepicker="container: body; value.two-way: selectedDate;" type="date" placeholder="pick a date" /> | |
| </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; | |
| } | |
| } |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |