addon/components/ui-date-input.js
import moment from 'moment';
import Pikaday from 'pikaday';
import layout from '../templates/components/ui-date-input';
import Component from '@ember/component';
let zh_cn = {
previousMonth : '上一月',
nextMonth : '下一月',
months : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
weekdays : ['周日','星期一','星期二','星期三','星期四','星期五','星期六'],
weekdaysShort : ['日','一','二','三','四','五','六']
};
/**
ui-date-input component
@module components
@namespace components
@class UiDateInput
@constructor
*/
export default Component.extend({
layout: layout,
/**
display language, by default is zh_CN
@property {String} lang
@default 'zh_CN'
*/
lang: 'zh_CN',
tagName: 'div',
classNameBindings: ['class'],
/**
class apply to this component
@property {String} class
@default 'ui input'
*/
class: 'ui input',
didInsertElement(){
let self = this;
let options = {
field: self.$('input')[0],
format: self.format,
position: self.position,
onSelect: function () {
if(typeof self.attrs.update === 'function'){
self.attrs.update(this.getMoment().format(self.format));
}
}
};
if(self.lang === 'zh_CN'){
options.i18n = zh_cn;
}
let picker = new Pikaday(options);
this.set('picker', picker);
},
/**
pikaday position 'bottom right', 'bottom left', 'top left', 'top right'
@property {String} position
@default 'bottom left'
*/
position: 'bottom left',
/**
moment format
@property {String} format
@default 'YYYY-MM-DD'
*/
format: 'YYYY-MM-DD',
init(){
this._super(...arguments);
if(this.value && moment(this.value).isValid()){
this.set('valueDisplay', moment(this.value).format(this.format));
}
},
willDestory(){
this._super(...arguments);
this.picker.destroy();
}
});