javascript - Polymer - Vaadin Date Picker; Vaadin Grid: How to change date format? -
does know how change date format vaadin-date-picker? i'm using polymer , vaadin-grid , cannot change date format.
the code of vaadin-date-picker.html element is:
<!-- @license copyright (c) 2017 vaadin ltd. program available under apache license version 2.0, available @ https://vaadin.com/license/ --> <link rel="import" href="../polymer/polymer-element.html"> <link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html"> <link rel="import" href="../iron-dropdown/iron-dropdown.html"> <link rel="import" href="../iron-media-query/iron-media-query.html"> <link rel="import" href="../vaadin-themable-mixin/vaadin-themable-mixin.html"> <link rel="import" href="vaadin-date-picker-overlay.html"> <link rel="import" href="vaadin-date-picker-mixin.html"> <link rel="import" href="vaadin-date-picker-helper.html"> <link rel="import" href="../vaadin-text-field/vaadin-text-field.html"> <link rel="import" href="vaadin-date-picker-styles.html"> <dom-module id="vaadin-date-picker"> <template> <style> :host { display: inline-block; } :host([opened]) { pointer-events: auto; } [part="text-field"] { min-width: 100%; } [part="overlay"] { height: 100vh; width: 420px; } [part="clear-button"], [part="toggle-button"] { font-family: 'vaadin-date-picker-icons'; } [part="clear-button"]::before { content: "\e901"; } [part="toggle-button"]::before { content: "\e902"; } :host([disabled]) [part="clear-button"], :host([disabled]) [part="toggle-button"], :host([readonly]) [part="clear-button"], :host([readonly]) [part="toggle-button"], :host(:not([has-value])) [part="clear-button"] { display: none; } </style> <vaadin-text-field id="input" role="application" autocomplete="off" on-focus="_focus" value="{{_userinputvalue}}" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errormessage]]" aria-label$="[[label]]" part="text-field" > <slot name="prefix" slot="prefix"></slot> <div part="clear-button" slot="suffix" on-tap="_clear" role="button" aria-label$="[[i18n.clear]]"></div> <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label$="[[i18n.calendar]]" aria-expanded$="[[_getariaexpanded(opened)]]"></div> </vaadin-text-field> <iron-dropdown id="dropdown" fullscreen$=[[_fullscreen]] allow-outside-scroll on-iron-overlay-opened="_onoverlayopened" on-iron-overlay-closed="_onoverlayclosed" on-iron-overlay-canceled="_preventcanceloncomponentaccess" opened="{{opened}}" no-auto-focus> <vaadin-date-picker-overlay id="overlay" i18n="[[i18n]]" fullscreen$="[[_fullscreen]]" label="[[label]]" selected-date="{{_selecteddate}}" slot="dropdown-content" focused-date="{{_focuseddate}}" show-week-numbers="[[showweeknumbers]]" min-date="[[_mindate]]" max-date="[[_maxdate]]" role="dialog" part="overlay"> </vaadin-date-picker-overlay> </iron-dropdown> <iron-media-query query="[[_fullscreenmediaquery]]" query-matches="{{_fullscreen}}"> </iron-media-query> </template> <script> if (!polymer.element) { throw new error(`unexpected polymer version ${polymer.version} used, expected v2.0.0 or later.`); } { /** * * `<vaadin-date-picker>` date selection field includes scrollable * month calendar view. * ```html * <vaadin-date-picker label="birthday"></vaadin-date-picker> * ``` * ```js * datepicker.value = '2016-03-02'; * ``` * when selected `value` changed, `value-changed` event triggered. * * * ### styling * * following shadow dom parts available styling: * * part name | description | theme element * ----------------|----------------|---------------- * `text-field` | input element | vaadin-date-picker * `clear-button` | clear button | vaadin-date-picker * `toggle-button` | toggle button | vaadin-date-picker * `overlay` | overlay element | vaadin-date-picker * `overlay` | overlay element | vaadin-date-picker-light * `overlay-header` | fullscreen mode header | vaadin-date-picker-overlay * `label` | fullscreen mode value/label | vaadin-date-picker-overlay * `clear-button` | fullscreen mode clear button | vaadin-date-picker-overlay * `toggle-button` | fullscreen mode toggle button | vaadin-date-picker-overlay * `years-toggle-button` | fullscreen mode years scroller toggle | vaadin-date-picker-overlay * `months` | months scroller | vaadin-date-picker-overlay * `years` | years scroller | vaadin-date-picker-overlay * `toolbar` | footer bar buttons | vaadin-date-picker-overlay * `today-button` | today button | vaadin-date-picker-overlay * `cancel-button` | cancel button | vaadin-date-picker-overlay * `month` | month calendar | vaadin-date-picker-overlay * `year-number` | year number | vaadin-date-picker-overlay * `year-separator` | year separator | vaadin-date-picker-overlay * `month-header` | month title | vaadin-month-calendar * `weekdays` | weekday container | vaadin-month-calendar * `weekday` | weekday element | vaadin-month-calendar * `week-numbers` | week numbers container | vaadin-month-calendar * `week-number` | week number element | vaadin-month-calendar * `date` | date element | vaadin-month-calendar * * if want replace default input field custom implementation, should use * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element. * * @memberof vaadin * @mixes vaadin.themablemixin * @mixes vaadin.datepickermixin * @mixes polymer.gestureeventlisteners * @demo demo/index.html */ class datepickerelement extends vaadin.themablemixin(vaadin.datepickermixin(polymer.gestureeventlisteners(polymer.element))) { static is() { return 'vaadin-date-picker'; } static properties() { return { /** * set true disable element. */ disabled: { type: boolean, value: false, reflecttoattribute: true }, /** * error message display when input invalid. */ errormessage: string, /** * placeholder string in addition label. if set, label float. */ placeholder: string, /** * set true make element read-only. */ readonly: { type: boolean, value: false, reflecttoattribute: true }, /** * property set true when control value invalid. */ invalid: { type: boolean, reflecttoattribute: true, notify: true, value: false }, _userinputvalue: string }; } static observers() { return [ '_userinputvaluechanged(_userinputvalue)' ]; } ready() { super.ready(); // in order have synchronized invalid property, need use same validate logic. polymer.renderstatus.afternextrender(this, () => this._inputelement.validate = () => {}); } _clear(e) { e.stoppropagation(); this.value = ''; this.close(); } _toggle(e) { e.stoppropagation(); this[this.$.dropdown.opened ? 'close' : 'open'](); } _input() { return this.$.input; } set _inputvalue(value) { this._inputelement.value = value; } _inputvalue() { return this._inputelement.value; } _getariaexpanded(opened) { return boolean(opened).tostring(); } } customelements.define(datepickerelement.is, datepickerelement); /** * @namespace vaadin */ window.vaadin = window.vaadin || {}; vaadin.datepickerelement = datepickerelement; } </script> </dom-module> code on my-view1.html page returns yyyy-mm-dd:
<!-- @license copyright (c) 2016 polymer project authors. rights reserved. code may used under bsd style license found @ http://polymer.github.io/license.txt complete set of authors may found @ http://polymer.github.io/authors.txt complete set of contributors may found @ http://polymer.github.io/contributors.txt code distributed google part of polymer project subject additional ip rights grant found @ http://polymer.github.io/patents.txt --> <link rel="import" href="../bower_components/polymer/polymer-element.html"> <link rel="import" href="shared-styles.html"> <link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> <link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/app-storage/app-localstorage/app-localstorage-document.html"> <dom-module id="my-view1"> <template> <style include="shared-styles"> :host { display: block; padding: 10px; } .form { display: flex; flex-direction: column; } .form paper-input { flex: 1; margin-right: 10px; } .form vaadin-date-picker { flex: 1; margin-top: 10px; } .form paper-button { margin-top: 10px; align-self: flex-end; } </style> <div class="card"> <div class="form"> <paper-input label="sum" value="{{todo.task}}" auto-validate placeholder="suma" required pattern="[0-9]*" error-message="numbers only"></paper-input> <vaadin-date-picker label="date" value="{{todo.due}}"></vaadin-date-picker> <paper-button raised on-tap="_addtodo">add</paper-button> </div> <br> <vaadin-grid style="display: flex;" id="grid" items={{todos}}> <vaadin-grid-column width="calc(50% - 90px)"> <template class="header">sum</template> <template>{{item.task}}</template> </vaadin-grid-column> <vaadin-grid-column width="30%"> <template class="header" >date</template> <template>{{item.due}}</template> </vaadin-grid-column> <vaadin-grid-column width="10%"> <template><paper-icon-button icon="close" on-tap="_remove"></paper-icon-button></template> </vaadin-grid-column> </vaadin-grid> </div> <app-localstorage-document key="todos" data="{{todos}}"> </app-localstorage-document> <center> copyright © 2017 dragosh.</center> </template> <script> class myview1 extends polymer.element { static is() { return 'my-view1'; } static properties() { return { todo: { type: object, value: () => { return {} } }, todos: { type: array, value: () => [] } }; } _addtodo() { console.log(this.todo) }; _remove(e) { var index = this.todos.indexof(e.model.item); this.splice('todos', index, 1) this.$.grid.clearcache(); }; } window.customelements.define(myview1.is, myview1); </script> </dom-module> if select date in vaadin-date-picker, , enter no sum in sum input appears dd-mm-yyyy in input, console logs yyyy-mm-dd.
here screenshot can understand better: 
wrong here? can change date format? thank you!
Comments
Post a Comment