import MonthInput from './MonthInput' import MonthMenu from './MonthMenu' import supportDom from '../decorators/supportDom' import { DEFAULT_TIMEZONE } from '../consts' import { noop, parse } from '../utils'
@supportDom export default class Monthpicker {
constructor(dom, options = {}) { this.dom = dom this.tz = options.tz || DEFAULT_TIMEZONE this.date = options.date this.menuDate = this.date this.options = options this.backdropMode = options.backdropMode || 'auto' this.noFuture = options.noFuture || true this.change = options.change || noop this.init() } init() { const { dom } = this this.monthInput = new MonthInput( dom.querySelector('[data-month]'), this.date, this.options ) this.monthMenu = new MonthMenu({ date: this.menuDate, change: date => { this.monthInput.setDate(date) this.monthInput.clearStatus() this.monthMenu.hide() }, noFuture: this.noFuture }) this.addEvents() } handleMonthInputFocus() { const { monthInput } = this monthInput.clearStatus() monthInput.setActive(true) this.monthMenu.show(this.dom) } handleMonthInputKeyUp(event) { const { monthInput } = this const { value } = event.target const res = parse(value, monthInput.datePattern, this.date) if (res.toString() === 'Invalid Date') { monthInput.setDanger(true) this.nextDate = null } else { monthInput.setDanger(false) this.nextDate = res } } handleMonthInputBlur() { if (this.nextDate) { this.date = this.nextDate this.menuDate = this.date this.monthMenu.setDate(this.menuDate) this.nextDate = null } } addEvents() { const { monthInput } = this monthInput.on('focus', () => this.handleMonthInputFocus()) monthInput.on('click', event => event.stopPropagation()) monthInput.on('keyup', event => this.handleMonthInputKeyUp(event)) monthInput.on('blur', () => this.handleMonthInputBlur()) if (this.backdropMode === 'auto') { this.addEvent(document, 'click', () => { this.monthMenu.hide() this.monthInput.clearStatus() }) } } destroy() { this.monthInput.destroy() this.monthMenu.destroy() }
}