Last active
October 24, 2016 15:38
-
-
Save Thanood/e5af535897f7b6e03bd41b047ed0c252 to your computer and use it in GitHub Desktop.
Aurelia-Materialize bridge select and datepicker issue #301
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="materialize/dist/css/materialize.css"></require> | |
| <require from="./my-form"></require> | |
| <my-form></my-form> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| activePage = 1; | |
| setToFive() { | |
| this.activePage = 5; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <input id.bind="dpId" type="date" md-datepicker="container: body; value.two-way: date;" placeholder="Choose a date" /> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bindable, bindingMode, decorators} from 'aurelia-framework'; | |
| export const DatePickerCustomElement = decorators( | |
| bindable({ name: 'date', defaultBindingMode: bindingMode.twoWay }), | |
| bindable({ name: 'dpId', defaultBindingMode: bindingMode.oneTime }), | |
| bindable({ name: 'label', defaultBindingMode: bindingMode.oneTime }) | |
| ).on(class { | |
| constructor() { | |
| } | |
| attached() { | |
| /* | |
| $('.datepicker').pickadate({ | |
| selectMonths: true, // Creates a dropdown to control month | |
| selectYears: 3 // Creates a dropdown of 15 years to control year | |
| }); | |
| */ | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.17.1-3/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************************************************* | |
| * 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()); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./datepicker"></require> | |
| <form submit.delegate="save()"> | |
| <div> | |
| <md-card md-title="Client"> | |
| <div class="col s12 m6"> <!-- the grid system seems not to work even when I have add the require in the app.html like says in the doc --> | |
| <select md-select="label: Client" value.two-way="selectedClient" md-select.ref="select"> | |
| <option value="" disabled selected>Select a client...</option> | |
| <option repeat.for="client of clients" value.bind="client.ID">${client.name}</option> | |
| </select> | |
| </div> | |
| <div class="col s12 m6"> | |
| <select md-select="disabled.bind: disableCategorySelect; label: Category" value.two-way="selectedCategory"> | |
| <option value="" disabled selected>Select a category...</option> | |
| <option repeat.for="category of categories" value.bind="category.ID">${category.name}</option> | |
| </select> | |
| </div> | |
| </md-card> | |
| <md-card md-title="Time"> | |
| <div> | |
| <date-picker dp-id="startTime" label="Date" date.bind="worktime.start"></date-picker> | |
| <!-- if I uncomment the previous line, it will be render in between my two select --> | |
| </div> | |
| </md-card> | |
| </div> | |
| </form> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {observable} from 'aurelia-framework'; | |
| export class MyForm { | |
| worktime; | |
| clients = []; | |
| categories = [{ID: 1, name: 'Category 1'}, {ID: 2, name: 'Category 2'}]; | |
| disableCategorySelect; | |
| @observable() selectedClient; | |
| selectedCategory; | |
| constructor() { | |
| this.selectedClient = ''; //if I set my default selectedClient to '' then the value are not render anymore even if in the inspector I can see the values | |
| this.selectedCategory = ''; | |
| this.disableCategorySelect = true; | |
| //this.worktime = {ID: 1, name: 'test', start: new Date(), client: {ID: 1, name: 'My Company1'}}; | |
| //this.clients = [{ID: 1, name: 'Client 1'}, {ID: 2, name: 'Client 2'}]; | |
| } | |
| attached() { | |
| this.worktime = {ID: 1, name: 'test', start: new Date(), client: {ID: 1, name: 'My Company1'}}; | |
| this.clients = [{ID: 1, name: 'Client 1'}, {ID: 2, name: 'Client 2'}]; | |
| // added @Thanood | |
| this.select.refresh(); | |
| } | |
| selectedClientChanged() { | |
| this.disableCategorySelect = false; | |
| } | |
| save() {} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment