Skip to content

Instantly share code, notes, and snippets.

@github-polymer-user
Created March 19, 2016 15:31
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save github-polymer-user/611eb337c7991702fa07 to your computer and use it in GitHub Desktop.
<dom-module id='x-datepicker'>
<template>
<style>
:host {
min-height: 67px;
}
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
.date-picker--mdl-button {
transform: translate(-100%, 0%);
}
.is-disabled {
pointer-events: none;
}
.textarea {
width: 100%;
height: 67px;
min-height: 67px;
}
</style>
<div class="textarea">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--align-right mdl-textfield--floating-label" id$="{{id}}-textfield" disabled$="[[disabled]]">
<span class="mdl-textfield__label" disabled$="[[disabled]]"><i18n datepicker$="{{locale}}.{{id}}">{{title}}</i18n></span>
<input class="mdl-textfield__input" type="text" id$="{{id}}-textfield__input" disabled$="[[disabled]]">
<label class="date-picker--mdl-button mdl-button mdl-js-button mdl-button--icon" for$="{{id}}-textfield__input" disabled$="[[disabled]]">
<i class="material-icons mdl-list__item--icon" id$="{{id}}-icon" on-click="updatePicker" disabled$="[[disabled]]">date_range</i>
</label>
</div>
</div>
</template>
<script>
// element registration
Polymer({
is: 'x-datepicker',
properties: {
id: {
type: String,
reflectToAttribute: true
}
},
ready: function() {
var _callback = function(language) {
}.bind(this);
app.i18n.attach(_callback);
this.localize(null, app.baseUrl, ['datepicker.i18n'], 'i18n', 'datepicker', this.id);
},
behaviors: [app.LocalizationBehavior],
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment