To prevent the datepicker icon from appearing below the datepicker, add the std-icon-fixup class to the datepicker input element.
You can provide an alternative css class by setting the iconClass option. Here's the style used in std-icon-fixup to fix the icon:
[md-datepicker] + i.material-icons.std-icon-fixup {
margin-left: -24px;
line-height: 1;
margin-top: 12px;
cursor: pointer;
}| <template> | |
| <div> | |
| <input | |
| md-datepicker="container: body; value.two-way: selectedDate; options.bind:advancedOptions; parsers.bind:parsers" | |
| class="std-icon-fixup" | |
| type="date" placeholder="pick a date"/> | |
| </div> | |
| <div> | |
| <button md-button click.delegate="setDate()">set date</button> | |
| <button md-button click.delegate="addOtherParser()">Add Keyword Date Parser</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 options object set in view model . This allows you to configure the pickadate | |
| plugin as much as you'd like. | |
| This property is one-time bound. | |
| The DatePicker input accepts the following formats by default for now: | |
| <ul> | |
| <li>- mm/dd/yyyy</li> | |
| <li>- mm-dd-yyyy</li> | |
| </ul> | |
| </div> | |
| <div> | |
| If you would like to configure different parsers to handle the editable option, simply bind the parsers property and | |
| push/remove/replace the array with your own Parser classes. The Parser class would need to consists of | |
| canParse(value) and parse(value). The example here allows you to type in "yesterday" and will parse for you | |
| yesterday's date. | |
| </div> | |
| <div> | |
| Allowed keywords are: | |
| <ul> | |
| <li>- yesterday</li> | |
| <li>- today</li> | |
| <li>- tomorrow</li> | |
| <li>- next week</li> | |
| </ul> | |
| </div> | |
| </template> |
| import {DatePickerDefaultParser} from 'aurelia-materialize-bridge/datepicker/datepicker-default-parser'; | |
| import {inject} from 'aurelia-framework'; | |
| @inject(DatePickerDefaultParser) | |
| export class App { | |
| selectedDate = null; | |
| advancedOptions = {}; | |
| parsers = []; | |
| constructor(datePickerDefaultParser) { | |
| let today = new Date(); | |
| let nextWeek = new Date(); | |
| nextWeek.setDate(today.getDate() + 8); | |
| this.advancedOptions = { | |
| closeOnSelect: true, | |
| closeOnClear: true, | |
| max: nextWeek, | |
| selectYears: 50, | |
| editable: true, | |
| showIcon: true | |
| }; | |
| this.parsers = [datePickerDefaultParser]; | |
| } | |
| setDate() { | |
| let date = new Date(); | |
| this.selectedDate = date; | |
| } | |
| addOtherParser() { | |
| let newParser = new KeywordParser(); | |
| this.parsers.push(newParser); | |
| } | |
| } | |
| class KeywordParser { | |
| keywords = [ | |
| 'yesterday', | |
| 'today', | |
| 'tomorrow', | |
| 'next week' | |
| ]; | |
| canParse(value) { | |
| if (value && typeof value === 'string') { | |
| let val = value.toLowerCase(); | |
| return this.keywords.indexOf(val) > -1; | |
| } | |
| } | |
| parse(value) { | |
| let currentDate = new Date(); | |
| let val = value.toLowerCase(); | |
| switch (val) { | |
| case 'yesterday': | |
| currentDate.setDate(currentDate.getDate() - 1); | |
| break; | |
| case 'tomorrow': | |
| currentDate.setDate(currentDate.getDate() + 1); | |
| break; | |
| case 'next week': | |
| currentDate.setDate(currentDate.getDate() + 7); | |
| break; | |
| case 'today': | |
| default: | |
| break; | |
| } | |
| return currentDate; | |
| } | |
| } |
| <!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()); | |
| } |