From b27858ddb52b2f6238294eea561e129c6194b1ab Mon Sep 17 00:00:00 2001 From: Sergio Crisostomo Date: Tue, 17 Oct 2017 13:09:04 +0200 Subject: [PATCH] add date panel label format logic --- src/components/date-picker/panel/date-panel-label.vue | 25 +++++++++++++++++++++++++ src/components/date-picker/panel/date-range.vue | 85 +++++++++++++++++++++++++++++++++++-------------------------------------------------- src/components/date-picker/panel/date.vue | 50 ++++++++++++++++++++++---------------------------- src/components/date-picker/util.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 143 insertions(+), 78 deletions(-) create mode 100644 src/components/date-picker/panel/date-panel-label.vue diff --git a/src/components/date-picker/panel/date-panel-label.vue b/src/components/date-picker/panel/date-panel-label.vue new file mode 100644 index 0000000..91f0fc4 --- /dev/null +++ b/src/components/date-picker/panel/date-panel-label.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue index 1a8605c..81c123e 100644 --- a/src/components/date-picker/panel/date-range.vue +++ b/src/components/date-picker/panel/date-range.vue @@ -16,13 +16,10 @@ :class="iconBtnCls('prev')" @click="prevMonth" v-show="leftCurrentView === 'date'"> - {{ leftYearLabel }} - {{ leftMonthLabel }} + - {{ rightYearLabel }} - {{ rightMonthLabel }} + @@ -138,7 +132,8 @@ import MonthTable from '../base/month-table.vue'; import TimePicker from './time-range.vue'; import Confirm from '../base/confirm.vue'; - import { toDate, prevMonth, nextMonth, initTimeDate } from '../util'; + import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util'; + import datePanelLabel from './date-panel-label.vue'; import Mixin from './mixin'; import Locale from '../../../mixins/locale'; @@ -149,7 +144,7 @@ export default { name: 'DatePicker', mixins: [ Mixin, Locale ], - components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm }, + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel }, data () { return { prefixCls: prefixCls, @@ -195,26 +190,9 @@ return this.date; } }, - leftYearLabel () { - const tYear = this.t('i.datepicker.year'); - if (this.leftCurrentView === 'year') { - const year = this.leftTableYear; - if (!year) return ''; - const startYear = Math.floor(year / 10) * 10; - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; - } else { - const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear; - if (!year) return ''; - return `${year}${tYear}`; - } - }, leftMonth () { return this.date.getMonth(); }, - leftMonthLabel () { - const month = this.leftMonth + 1; - return this.t(`i.datepicker.month${month}`); - }, rightYear () { return this.rightDate.getFullYear(); }, @@ -225,26 +203,9 @@ return this.date; } }, - rightYearLabel () { - const tYear = this.t('i.datepicker.year'); - if (this.rightCurrentView === 'year') { - const year = this.rightTableYear; - if (!year) return ''; - const startYear = Math.floor(year / 10) * 10; - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; - } else { - const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear; - if (!year) return ''; - return `${year}${tYear}`; - } - }, rightMonth () { return this.rightDate.getMonth(); }, - rightMonthLabel () { - const month = this.rightMonth + 1; - return this.t(`i.datepicker.month${month}`); - }, rightDate () { const newDate = new Date(this.date); const month = newDate.getMonth(); @@ -258,6 +219,14 @@ } return newDate; }, + leftDatePanelLabel () { + if (!this.leftYear) return null; // not ready yet + return this.panelLabelConfig('left'); + }, + rightDatePanelLabel () { + if (!this.leftYear) return null; // not ready yet + return this.panelLabelConfig('right'); + }, timeDisabled () { return !(this.minDate && this.maxDate); } @@ -288,6 +257,22 @@ } }, methods: { + panelLabelConfig (direction) { + const locale = this.t('i.locale'); + const datePanelLabel = this.t('i.datepicker.datePanelLabel'); + const handler = type => { + const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker; + return () => fn(direction); + }; + + const date = new Date(this[`${direction}Year`], this[`${direction}Month`]); + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date); + + return { + separator: separator, + labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj)) + }; + }, resetDate () { this.date = new Date(this.date); this.leftTableYear = this.date.getFullYear(); diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue index 9101d40..980720e 100644 --- a/src/components/date-picker/panel/date.vue +++ b/src/components/date-picker/panel/date.vue @@ -15,13 +15,10 @@ :class="iconBtnCls('prev')" @click="changeMonth(-1)" v-show="currentView === 'date'"> - {{ yearLabel }} - {{ monthLabel }} + @@ -83,11 +80,12 @@ import MonthTable from '../base/month-table.vue'; import TimePicker from './time.vue'; import Confirm from '../base/confirm.vue'; + import datePanelLabel from './date-panel-label.vue'; import Mixin from './mixin'; import Locale from '../../../mixins/locale'; - import { initTimeDate, siblingMonth } from '../util'; + import { initTimeDate, siblingMonth, formatDateLabels } from '../util'; const prefixCls = 'ivu-picker-panel'; const datePrefixCls = 'ivu-date-picker'; @@ -95,7 +93,7 @@ export default { name: 'DatePicker', mixins: [ Mixin, Locale ], - components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm }, + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel }, data () { return { prefixCls: prefixCls, @@ -123,19 +121,21 @@ } ]; }, - yearLabel () { - const tYear = this.t('i.datepicker.year'); - const year = this.year; - if (!year) return ''; - if (this.currentView === 'year') { - const startYear = Math.floor(year / 10) * 10; - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; - } - return `${year}${tYear}`; - }, - monthLabel () { - const month = this.month + 1; - return this.t(`i.datepicker.month${month}`); + datePanelLabel () { + if (!this.year) return null; // not ready yet + const locale = this.t('i.locale'); + const datePanelLabel = this.t('i.datepicker.datePanelLabel'); + const date = new Date(this.year, this.month); + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date); + + const handler = type => { + return () => (this.currentView = type); + }; + + return { + separator: separator, + labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj)) + }; } }, watch: { @@ -196,12 +196,6 @@ this.date = siblingMonth(this.date, dir); this.setMonthYear(this.date); }, - showYearPicker () { - this.currentView = 'year'; - }, - showMonthPicker () { - this.currentView = 'month'; - }, handleToggleTime () { if (this.currentView === 'date') { this.currentView = 'time'; diff --git a/src/components/date-picker/util.js b/src/components/date-picker/util.js index eb865f3..68abaa1 100644 --- a/src/components/date-picker/util.js +++ b/src/components/date-picker/util.js @@ -61,3 +61,64 @@ export const initTimeDate = function() { date.setSeconds(0); return date; }; + +export const formatDateLabels = (function() { + /* + Formats: + yyyy - 4 digit year + m - month, numeric, 1 - 12 + m - month, numeric, 01 - 12 + mmm - month, 3 letters, as in `toLocaleDateString` + Mmm - month, 3 letters, capitalize the return from `toLocaleDateString` + mmmm - month, full name, as in `toLocaleDateString` + Mmmm - month, full name, capitalize the return from `toLocaleDateString` + */ + + const formats = { + yyyy: date => date.getFullYear(), + m: date => date.getMonth(), + mm: date => ('0' + date.getMonth()).slice(-2), + mmm: (date, locale) => { + const monthName = date.toLocaleDateString(locale, { + month: 'long' + }); + return monthName.slice(0, 3); + }, + Mmm: (date, locale) => { + const monthName = date.toLocaleDateString(locale, { + month: 'long' + }); + return (monthName[0].toUpperCase() + monthName.slice(1).toLowerCase()).slice(0, 3); + }, + mmmm: (date, locale) => + date.toLocaleDateString(locale, { + month: 'long' + }), + Mmmm: (date, locale) => { + const monthName = date.toLocaleDateString(locale, { + month: 'long' + }); + return monthName[0].toUpperCase() + monthName.slice(1).toLowerCase(); + } + }; + const formatRegex = new RegExp(['yyyy', 'Mmmm', 'mmmm', 'Mmm', 'mmm', 'mm', 'm'].join('|'), 'g'); + + return function(locale, format, date) { + const componetsRegex = /(\[[^\]]+\])([^\[\]]+)(\[[^\]]+\])/; + const components = format.match(componetsRegex).slice(1); + const separator = components[1]; + const labels = [components[0], components[2]].map(component => { + const label = component.replace(/\[[^\]]+\]/, str => { + return str.slice(1, -1).replace(formatRegex, match => formats[match](date, locale)); + }); + return { + label: label, + type: component.includes('yy') ? 'year' : 'month' + }; + }); + return { + separator: separator, + labels: labels + }; + }; +})(); -- libgit2 0.21.4