Commit f672ae027ce37c5b3b0dc96cde9d35536805b0dc
Committed by
GitHub
Merge pull request #2097 from SergioCrisostomo/use-locale-formated-year-month
use date.toLocaleDateString to format year/month
Showing
20 changed files
with
192 additions
and
99 deletions
Show diff stats
src/components/date-picker/panel/date-panel-label.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <span> | ||
| 3 | + <span | ||
| 4 | + v-if="datePanelLabel" | ||
| 5 | + v-show="datePanelLabel.labels[0].type === 'year' || currentView === 'date'" | ||
| 6 | + :class="[datePrefixCls + '-header-label']" | ||
| 7 | + @click="datePanelLabel.labels[0].handler">{{ datePanelLabel.labels[0].label }}</span> | ||
| 8 | + <template v-if="datePanelLabel && currentView === 'date'">{{ datePanelLabel.separator }}</template> | ||
| 9 | + <span | ||
| 10 | + v-if="datePanelLabel" | ||
| 11 | + v-show="datePanelLabel.labels[1].type === 'year' || currentView === 'date'" | ||
| 12 | + :class="[datePrefixCls + '-header-label']" | ||
| 13 | + @click="datePanelLabel.labels[1].handler">{{ datePanelLabel.labels[1].label }}</span> | ||
| 14 | + </span> | ||
| 15 | +</template> | ||
| 16 | + | ||
| 17 | +<script> | ||
| 18 | +export default { | ||
| 19 | + props: { | ||
| 20 | + datePanelLabel: Object, | ||
| 21 | + currentView: String, | ||
| 22 | + datePrefixCls: String | ||
| 23 | + } | ||
| 24 | +}; | ||
| 25 | +</script> |
src/components/date-picker/panel/date-range.vue
| @@ -16,13 +16,10 @@ | @@ -16,13 +16,10 @@ | ||
| 16 | :class="iconBtnCls('prev')" | 16 | :class="iconBtnCls('prev')" |
| 17 | @click="prevMonth" | 17 | @click="prevMonth" |
| 18 | v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> | 18 | v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> |
| 19 | - <span | ||
| 20 | - :class="[datePrefixCls + '-header-label']" | ||
| 21 | - @click="showYearPicker('left')">{{ leftYearLabel }}</span> | ||
| 22 | - <span | ||
| 23 | - :class="[datePrefixCls + '-header-label']" | ||
| 24 | - @click="showMonthPicker('left')" | ||
| 25 | - v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span> | 19 | + <date-panel-label |
| 20 | + :date-panel-label="leftDatePanelLabel" | ||
| 21 | + :current-view="leftCurrentView" | ||
| 22 | + :date-prefix-cls="datePrefixCls"/> | ||
| 26 | <span | 23 | <span |
| 27 | :class="iconBtnCls('next', '-double')" | 24 | :class="iconBtnCls('next', '-double')" |
| 28 | @click="nextYear('left')" | 25 | @click="nextYear('left')" |
| @@ -66,13 +63,10 @@ | @@ -66,13 +63,10 @@ | ||
| 66 | :class="iconBtnCls('prev', '-double')" | 63 | :class="iconBtnCls('prev', '-double')" |
| 67 | @click="prevYear('right')" | 64 | @click="prevYear('right')" |
| 68 | v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span> | 65 | v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span> |
| 69 | - <span | ||
| 70 | - :class="[datePrefixCls + '-header-label']" | ||
| 71 | - @click="showYearPicker('right')">{{ rightYearLabel }}</span> | ||
| 72 | - <span | ||
| 73 | - :class="[datePrefixCls + '-header-label']" | ||
| 74 | - @click="showMonthPicker('right')" | ||
| 75 | - v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span> | 66 | + <date-panel-label |
| 67 | + :date-panel-label="rightDatePanelLabel" | ||
| 68 | + :current-view="rightCurrentView" | ||
| 69 | + :date-prefix-cls="datePrefixCls"/> | ||
| 76 | <span | 70 | <span |
| 77 | :class="iconBtnCls('next', '-double')" | 71 | :class="iconBtnCls('next', '-double')" |
| 78 | @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span> | 72 | @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span> |
| @@ -138,7 +132,8 @@ | @@ -138,7 +132,8 @@ | ||
| 138 | import MonthTable from '../base/month-table.vue'; | 132 | import MonthTable from '../base/month-table.vue'; |
| 139 | import TimePicker from './time-range.vue'; | 133 | import TimePicker from './time-range.vue'; |
| 140 | import Confirm from '../base/confirm.vue'; | 134 | import Confirm from '../base/confirm.vue'; |
| 141 | - import { toDate, prevMonth, nextMonth, initTimeDate } from '../util'; | 135 | + import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util'; |
| 136 | + import datePanelLabel from './date-panel-label.vue'; | ||
| 142 | 137 | ||
| 143 | import Mixin from './mixin'; | 138 | import Mixin from './mixin'; |
| 144 | import Locale from '../../../mixins/locale'; | 139 | import Locale from '../../../mixins/locale'; |
| @@ -149,7 +144,7 @@ | @@ -149,7 +144,7 @@ | ||
| 149 | export default { | 144 | export default { |
| 150 | name: 'DatePicker', | 145 | name: 'DatePicker', |
| 151 | mixins: [ Mixin, Locale ], | 146 | mixins: [ Mixin, Locale ], |
| 152 | - components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm }, | 147 | + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel }, |
| 153 | data () { | 148 | data () { |
| 154 | return { | 149 | return { |
| 155 | prefixCls: prefixCls, | 150 | prefixCls: prefixCls, |
| @@ -195,26 +190,9 @@ | @@ -195,26 +190,9 @@ | ||
| 195 | return this.date; | 190 | return this.date; |
| 196 | } | 191 | } |
| 197 | }, | 192 | }, |
| 198 | - leftYearLabel () { | ||
| 199 | - const tYear = this.t('i.datepicker.year'); | ||
| 200 | - if (this.leftCurrentView === 'year') { | ||
| 201 | - const year = this.leftTableYear; | ||
| 202 | - if (!year) return ''; | ||
| 203 | - const startYear = Math.floor(year / 10) * 10; | ||
| 204 | - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; | ||
| 205 | - } else { | ||
| 206 | - const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear; | ||
| 207 | - if (!year) return ''; | ||
| 208 | - return `${year}${tYear}`; | ||
| 209 | - } | ||
| 210 | - }, | ||
| 211 | leftMonth () { | 193 | leftMonth () { |
| 212 | return this.date.getMonth(); | 194 | return this.date.getMonth(); |
| 213 | }, | 195 | }, |
| 214 | - leftMonthLabel () { | ||
| 215 | - const month = this.leftMonth + 1; | ||
| 216 | - return this.t(`i.datepicker.month${month}`); | ||
| 217 | - }, | ||
| 218 | rightYear () { | 196 | rightYear () { |
| 219 | return this.rightDate.getFullYear(); | 197 | return this.rightDate.getFullYear(); |
| 220 | }, | 198 | }, |
| @@ -225,26 +203,9 @@ | @@ -225,26 +203,9 @@ | ||
| 225 | return this.date; | 203 | return this.date; |
| 226 | } | 204 | } |
| 227 | }, | 205 | }, |
| 228 | - rightYearLabel () { | ||
| 229 | - const tYear = this.t('i.datepicker.year'); | ||
| 230 | - if (this.rightCurrentView === 'year') { | ||
| 231 | - const year = this.rightTableYear; | ||
| 232 | - if (!year) return ''; | ||
| 233 | - const startYear = Math.floor(year / 10) * 10; | ||
| 234 | - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; | ||
| 235 | - } else { | ||
| 236 | - const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear; | ||
| 237 | - if (!year) return ''; | ||
| 238 | - return `${year}${tYear}`; | ||
| 239 | - } | ||
| 240 | - }, | ||
| 241 | rightMonth () { | 206 | rightMonth () { |
| 242 | return this.rightDate.getMonth(); | 207 | return this.rightDate.getMonth(); |
| 243 | }, | 208 | }, |
| 244 | - rightMonthLabel () { | ||
| 245 | - const month = this.rightMonth + 1; | ||
| 246 | - return this.t(`i.datepicker.month${month}`); | ||
| 247 | - }, | ||
| 248 | rightDate () { | 209 | rightDate () { |
| 249 | const newDate = new Date(this.date); | 210 | const newDate = new Date(this.date); |
| 250 | const month = newDate.getMonth(); | 211 | const month = newDate.getMonth(); |
| @@ -258,6 +219,14 @@ | @@ -258,6 +219,14 @@ | ||
| 258 | } | 219 | } |
| 259 | return newDate; | 220 | return newDate; |
| 260 | }, | 221 | }, |
| 222 | + leftDatePanelLabel () { | ||
| 223 | + if (!this.leftYear) return null; // not ready yet | ||
| 224 | + return this.panelLabelConfig('left'); | ||
| 225 | + }, | ||
| 226 | + rightDatePanelLabel () { | ||
| 227 | + if (!this.leftYear) return null; // not ready yet | ||
| 228 | + return this.panelLabelConfig('right'); | ||
| 229 | + }, | ||
| 261 | timeDisabled () { | 230 | timeDisabled () { |
| 262 | return !(this.minDate && this.maxDate); | 231 | return !(this.minDate && this.maxDate); |
| 263 | } | 232 | } |
| @@ -288,6 +257,22 @@ | @@ -288,6 +257,22 @@ | ||
| 288 | } | 257 | } |
| 289 | }, | 258 | }, |
| 290 | methods: { | 259 | methods: { |
| 260 | + panelLabelConfig (direction) { | ||
| 261 | + const locale = this.t('i.locale'); | ||
| 262 | + const datePanelLabel = this.t('i.datepicker.datePanelLabel'); | ||
| 263 | + const handler = type => { | ||
| 264 | + const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker; | ||
| 265 | + return () => fn(direction); | ||
| 266 | + }; | ||
| 267 | + | ||
| 268 | + const date = new Date(this[`${direction}Year`], this[`${direction}Month`]); | ||
| 269 | + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date); | ||
| 270 | + | ||
| 271 | + return { | ||
| 272 | + separator: separator, | ||
| 273 | + labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj)) | ||
| 274 | + }; | ||
| 275 | + }, | ||
| 291 | resetDate () { | 276 | resetDate () { |
| 292 | this.date = new Date(this.date); | 277 | this.date = new Date(this.date); |
| 293 | this.leftTableYear = this.date.getFullYear(); | 278 | this.leftTableYear = this.date.getFullYear(); |
src/components/date-picker/panel/date.vue
| @@ -15,13 +15,10 @@ | @@ -15,13 +15,10 @@ | ||
| 15 | :class="iconBtnCls('prev')" | 15 | :class="iconBtnCls('prev')" |
| 16 | @click="changeMonth(-1)" | 16 | @click="changeMonth(-1)" |
| 17 | v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> | 17 | v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span> |
| 18 | - <span | ||
| 19 | - :class="[datePrefixCls + '-header-label']" | ||
| 20 | - @click="showYearPicker">{{ yearLabel }}</span> | ||
| 21 | - <span | ||
| 22 | - :class="[datePrefixCls + '-header-label']" | ||
| 23 | - @click="showMonthPicker" | ||
| 24 | - v-show="currentView === 'date'">{{ monthLabel }}</span> | 18 | + <date-panel-label |
| 19 | + :date-panel-label="datePanelLabel" | ||
| 20 | + :current-view="currentView" | ||
| 21 | + :date-prefix-cls="datePrefixCls"/> | ||
| 25 | <span | 22 | <span |
| 26 | :class="iconBtnCls('next', '-double')" | 23 | :class="iconBtnCls('next', '-double')" |
| 27 | @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span> | 24 | @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span> |
| @@ -83,11 +80,12 @@ | @@ -83,11 +80,12 @@ | ||
| 83 | import MonthTable from '../base/month-table.vue'; | 80 | import MonthTable from '../base/month-table.vue'; |
| 84 | import TimePicker from './time.vue'; | 81 | import TimePicker from './time.vue'; |
| 85 | import Confirm from '../base/confirm.vue'; | 82 | import Confirm from '../base/confirm.vue'; |
| 83 | + import datePanelLabel from './date-panel-label.vue'; | ||
| 86 | 84 | ||
| 87 | import Mixin from './mixin'; | 85 | import Mixin from './mixin'; |
| 88 | import Locale from '../../../mixins/locale'; | 86 | import Locale from '../../../mixins/locale'; |
| 89 | 87 | ||
| 90 | - import { initTimeDate, siblingMonth } from '../util'; | 88 | + import { initTimeDate, siblingMonth, formatDateLabels } from '../util'; |
| 91 | 89 | ||
| 92 | const prefixCls = 'ivu-picker-panel'; | 90 | const prefixCls = 'ivu-picker-panel'; |
| 93 | const datePrefixCls = 'ivu-date-picker'; | 91 | const datePrefixCls = 'ivu-date-picker'; |
| @@ -95,7 +93,7 @@ | @@ -95,7 +93,7 @@ | ||
| 95 | export default { | 93 | export default { |
| 96 | name: 'DatePicker', | 94 | name: 'DatePicker', |
| 97 | mixins: [ Mixin, Locale ], | 95 | mixins: [ Mixin, Locale ], |
| 98 | - components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm }, | 96 | + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel }, |
| 99 | data () { | 97 | data () { |
| 100 | return { | 98 | return { |
| 101 | prefixCls: prefixCls, | 99 | prefixCls: prefixCls, |
| @@ -123,19 +121,21 @@ | @@ -123,19 +121,21 @@ | ||
| 123 | } | 121 | } |
| 124 | ]; | 122 | ]; |
| 125 | }, | 123 | }, |
| 126 | - yearLabel () { | ||
| 127 | - const tYear = this.t('i.datepicker.year'); | ||
| 128 | - const year = this.year; | ||
| 129 | - if (!year) return ''; | ||
| 130 | - if (this.currentView === 'year') { | ||
| 131 | - const startYear = Math.floor(year / 10) * 10; | ||
| 132 | - return `${startYear}${tYear} - ${startYear + 9}${tYear}`; | ||
| 133 | - } | ||
| 134 | - return `${year}${tYear}`; | ||
| 135 | - }, | ||
| 136 | - monthLabel () { | ||
| 137 | - const month = this.month + 1; | ||
| 138 | - return this.t(`i.datepicker.month${month}`); | 124 | + datePanelLabel () { |
| 125 | + if (!this.year) return null; // not ready yet | ||
| 126 | + const locale = this.t('i.locale'); | ||
| 127 | + const datePanelLabel = this.t('i.datepicker.datePanelLabel'); | ||
| 128 | + const date = new Date(this.year, this.month); | ||
| 129 | + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date); | ||
| 130 | + | ||
| 131 | + const handler = type => { | ||
| 132 | + return () => (this.currentView = type); | ||
| 133 | + }; | ||
| 134 | + | ||
| 135 | + return { | ||
| 136 | + separator: separator, | ||
| 137 | + labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj)) | ||
| 138 | + }; | ||
| 139 | } | 139 | } |
| 140 | }, | 140 | }, |
| 141 | watch: { | 141 | watch: { |
| @@ -196,12 +196,6 @@ | @@ -196,12 +196,6 @@ | ||
| 196 | this.date = siblingMonth(this.date, dir); | 196 | this.date = siblingMonth(this.date, dir); |
| 197 | this.setMonthYear(this.date); | 197 | this.setMonthYear(this.date); |
| 198 | }, | 198 | }, |
| 199 | - showYearPicker () { | ||
| 200 | - this.currentView = 'year'; | ||
| 201 | - }, | ||
| 202 | - showMonthPicker () { | ||
| 203 | - this.currentView = 'month'; | ||
| 204 | - }, | ||
| 205 | handleToggleTime () { | 199 | handleToggleTime () { |
| 206 | if (this.currentView === 'date') { | 200 | if (this.currentView === 'date') { |
| 207 | this.currentView = 'time'; | 201 | this.currentView = 'time'; |
src/components/date-picker/panel/time-range.vue
| @@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
| 3 | <div :class="[prefixCls + '-body']"> | 3 | <div :class="[prefixCls + '-body']"> |
| 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> | 4 | <div :class="[prefixCls + '-content', prefixCls + '-content-left']"> |
| 5 | <div :class="[timePrefixCls + '-header']"> | 5 | <div :class="[timePrefixCls + '-header']"> |
| 6 | - <template v-if="showDate">{{ visibleDate }}</template> | 6 | + <template v-if="showDate">{{ leftDatePanelLabel }}</template> |
| 7 | <template v-else>{{ t('i.datepicker.startTime') }}</template> | 7 | <template v-else>{{ t('i.datepicker.startTime') }}</template> |
| 8 | </div> | 8 | </div> |
| 9 | <time-spinner | 9 | <time-spinner |
| @@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
| 21 | </div> | 21 | </div> |
| 22 | <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> | 22 | <div :class="[prefixCls + '-content', prefixCls + '-content-right']"> |
| 23 | <div :class="[timePrefixCls + '-header']"> | 23 | <div :class="[timePrefixCls + '-header']"> |
| 24 | - <template v-if="showDate">{{ visibleDateEnd }}</template> | 24 | + <template v-if="showDate">{{ rightDatePanelLabel }}</template> |
| 25 | <template v-else>{{ t('i.datepicker.endTime') }}</template> | 25 | <template v-else>{{ t('i.datepicker.endTime') }}</template> |
| 26 | </div> | 26 | </div> |
| 27 | <time-spinner | 27 | <time-spinner |
| @@ -51,7 +51,7 @@ | @@ -51,7 +51,7 @@ | ||
| 51 | import Mixin from './mixin'; | 51 | import Mixin from './mixin'; |
| 52 | import Locale from '../../../mixins/locale'; | 52 | import Locale from '../../../mixins/locale'; |
| 53 | 53 | ||
| 54 | - import { initTimeDate, toDate, formatDate } from '../util'; | 54 | + import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util'; |
| 55 | 55 | ||
| 56 | const prefixCls = 'ivu-picker-panel'; | 56 | const prefixCls = 'ivu-picker-panel'; |
| 57 | const timePrefixCls = 'ivu-time-picker'; | 57 | const timePrefixCls = 'ivu-time-picker'; |
| @@ -95,19 +95,11 @@ | @@ -95,19 +95,11 @@ | ||
| 95 | showSeconds () { | 95 | showSeconds () { |
| 96 | return (this.format || '').indexOf('ss') !== -1; | 96 | return (this.format || '').indexOf('ss') !== -1; |
| 97 | }, | 97 | }, |
| 98 | - visibleDate () { | ||
| 99 | - const date = this.date || initTimeDate(); | ||
| 100 | - const tYear = this.t('i.datepicker.year'); | ||
| 101 | - const month = date.getMonth() + 1; | ||
| 102 | - const tMonth = this.t(`i.datepicker.month${month}`); | ||
| 103 | - return `${date.getFullYear()}${tYear} ${tMonth}`; | 98 | + leftDatePanelLabel () { |
| 99 | + return this.panelLabelConfig(this.date); | ||
| 104 | }, | 100 | }, |
| 105 | - visibleDateEnd () { | ||
| 106 | - const date = this.dateEnd || initTimeDate(); | ||
| 107 | - const tYear = this.t('i.datepicker.year'); | ||
| 108 | - const month = date.getMonth() + 1; | ||
| 109 | - const tMonth = this.t(`i.datepicker.month${month}`); | ||
| 110 | - return `${date.getFullYear()}${tYear} ${tMonth}`; | 101 | + rightDatePanelLabel () { |
| 102 | + return this.panelLabelConfig(this.dateEnd); | ||
| 111 | } | 103 | } |
| 112 | }, | 104 | }, |
| 113 | watch: { | 105 | watch: { |
| @@ -136,6 +128,12 @@ | @@ -136,6 +128,12 @@ | ||
| 136 | } | 128 | } |
| 137 | }, | 129 | }, |
| 138 | methods: { | 130 | methods: { |
| 131 | + panelLabelConfig (date) { | ||
| 132 | + const locale = this.t('i.locale'); | ||
| 133 | + const datePanelLabel = this.t('i.datepicker.datePanelLabel'); | ||
| 134 | + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate()); | ||
| 135 | + return [labels[0].label, separator, labels[1].label].join(''); | ||
| 136 | + }, | ||
| 139 | handleClear() { | 137 | handleClear() { |
| 140 | this.date = initTimeDate(); | 138 | this.date = initTimeDate(); |
| 141 | this.dateEnd = initTimeDate(); | 139 | this.dateEnd = initTimeDate(); |
src/components/date-picker/util.js
| @@ -61,3 +61,64 @@ export const initTimeDate = function() { | @@ -61,3 +61,64 @@ export const initTimeDate = function() { | ||
| 61 | date.setSeconds(0); | 61 | date.setSeconds(0); |
| 62 | return date; | 62 | return date; |
| 63 | }; | 63 | }; |
| 64 | + | ||
| 65 | +export const formatDateLabels = (function() { | ||
| 66 | + /* | ||
| 67 | + Formats: | ||
| 68 | + yyyy - 4 digit year | ||
| 69 | + m - month, numeric, 1 - 12 | ||
| 70 | + m - month, numeric, 01 - 12 | ||
| 71 | + mmm - month, 3 letters, as in `toLocaleDateString` | ||
| 72 | + Mmm - month, 3 letters, capitalize the return from `toLocaleDateString` | ||
| 73 | + mmmm - month, full name, as in `toLocaleDateString` | ||
| 74 | + Mmmm - month, full name, capitalize the return from `toLocaleDateString` | ||
| 75 | + */ | ||
| 76 | + | ||
| 77 | + const formats = { | ||
| 78 | + yyyy: date => date.getFullYear(), | ||
| 79 | + m: date => date.getMonth(), | ||
| 80 | + mm: date => ('0' + date.getMonth()).slice(-2), | ||
| 81 | + mmm: (date, locale) => { | ||
| 82 | + const monthName = date.toLocaleDateString(locale, { | ||
| 83 | + month: 'long' | ||
| 84 | + }); | ||
| 85 | + return monthName.slice(0, 3); | ||
| 86 | + }, | ||
| 87 | + Mmm: (date, locale) => { | ||
| 88 | + const monthName = date.toLocaleDateString(locale, { | ||
| 89 | + month: 'long' | ||
| 90 | + }); | ||
| 91 | + return (monthName[0].toUpperCase() + monthName.slice(1).toLowerCase()).slice(0, 3); | ||
| 92 | + }, | ||
| 93 | + mmmm: (date, locale) => | ||
| 94 | + date.toLocaleDateString(locale, { | ||
| 95 | + month: 'long' | ||
| 96 | + }), | ||
| 97 | + Mmmm: (date, locale) => { | ||
| 98 | + const monthName = date.toLocaleDateString(locale, { | ||
| 99 | + month: 'long' | ||
| 100 | + }); | ||
| 101 | + return monthName[0].toUpperCase() + monthName.slice(1).toLowerCase(); | ||
| 102 | + } | ||
| 103 | + }; | ||
| 104 | + const formatRegex = new RegExp(['yyyy', 'Mmmm', 'mmmm', 'Mmm', 'mmm', 'mm', 'm'].join('|'), 'g'); | ||
| 105 | + | ||
| 106 | + return function(locale, format, date) { | ||
| 107 | + const componetsRegex = /(\[[^\]]+\])([^\[\]]+)(\[[^\]]+\])/; | ||
| 108 | + const components = format.match(componetsRegex).slice(1); | ||
| 109 | + const separator = components[1]; | ||
| 110 | + const labels = [components[0], components[2]].map(component => { | ||
| 111 | + const label = component.replace(/\[[^\]]+\]/, str => { | ||
| 112 | + return str.slice(1, -1).replace(formatRegex, match => formats[match](date, locale)); | ||
| 113 | + }); | ||
| 114 | + return { | ||
| 115 | + label: label, | ||
| 116 | + type: component.includes('yy') ? 'year' : 'month' | ||
| 117 | + }; | ||
| 118 | + }); | ||
| 119 | + return { | ||
| 120 | + separator: separator, | ||
| 121 | + labels: labels | ||
| 122 | + }; | ||
| 123 | + }; | ||
| 124 | +})(); |
src/locale/lang/de-DE.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'de-DE', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Auswählen', | 5 | placeholder: 'Auswählen', |
| 5 | noMatch: 'Keine Übereinstimmungen', | 6 | noMatch: 'Keine Übereinstimmungen', |
| @@ -19,7 +20,8 @@ export default { | @@ -19,7 +20,8 @@ export default { | ||
| 19 | endTime: 'Ende', | 20 | endTime: 'Ende', |
| 20 | clear: 'Leeren', | 21 | clear: 'Leeren', |
| 21 | ok: 'OK', | 22 | ok: 'OK', |
| 22 | - month: '', | 23 | + datePanelLabel: '[mmmm] [yyyy]', |
| 24 | + month: 'Monat', | ||
| 23 | month1: 'Januar', | 25 | month1: 'Januar', |
| 24 | month2: 'Februar', | 26 | month2: 'Februar', |
| 25 | month3: 'März', | 27 | month3: 'März', |
| @@ -32,7 +34,7 @@ export default { | @@ -32,7 +34,7 @@ export default { | ||
| 32 | month10: 'Oktober', | 34 | month10: 'Oktober', |
| 33 | month11: 'November', | 35 | month11: 'November', |
| 34 | month12: 'Dezember', | 36 | month12: 'Dezember', |
| 35 | - year: '', | 37 | + year: 'Jahr', |
| 36 | weekStartDay: '1', | 38 | weekStartDay: '1', |
| 37 | weeks: { | 39 | weeks: { |
| 38 | sun: 'So', | 40 | sun: 'So', |
src/locale/lang/en-US.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'en-US', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Select', | 5 | placeholder: 'Select', |
| 5 | noMatch: 'No matching data', | 6 | noMatch: 'No matching data', |
| @@ -19,7 +20,8 @@ export default { | @@ -19,7 +20,8 @@ export default { | ||
| 19 | endTime: 'End Time', | 20 | endTime: 'End Time', |
| 20 | clear: 'Clear', | 21 | clear: 'Clear', |
| 21 | ok: 'OK', | 22 | ok: 'OK', |
| 22 | - month: '', | 23 | + datePanelLabel: '[mmmm] [yyyy]', |
| 24 | + month: 'Month', | ||
| 23 | month1: 'January', | 25 | month1: 'January', |
| 24 | month2: 'February', | 26 | month2: 'February', |
| 25 | month3: 'March', | 27 | month3: 'March', |
| @@ -32,7 +34,7 @@ export default { | @@ -32,7 +34,7 @@ export default { | ||
| 32 | month10: 'October', | 34 | month10: 'October', |
| 33 | month11: 'November', | 35 | month11: 'November', |
| 34 | month12: 'December', | 36 | month12: 'December', |
| 35 | - year: '', | 37 | + year: 'Year', |
| 36 | weekStartDay: '0', | 38 | weekStartDay: '0', |
| 37 | weeks: { | 39 | weeks: { |
| 38 | sun: 'Sun', | 40 | sun: 'Sun', |
src/locale/lang/es-ES.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'es-ES', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Seleccionar', | 5 | placeholder: 'Seleccionar', |
| 5 | noMatch: 'Sin coincidencias', | 6 | noMatch: 'Sin coincidencias', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Hora de fin', | 20 | endTime: 'Hora de fin', |
| 20 | clear: 'Limpiar', | 21 | clear: 'Limpiar', |
| 21 | ok: 'Aceptar', | 22 | ok: 'Aceptar', |
| 23 | + datePanelLabel: '[mmmm] [yyyy]', | ||
| 22 | month: 'Mes', | 24 | month: 'Mes', |
| 23 | month1: 'Enero', | 25 | month1: 'Enero', |
| 24 | month2: 'Febrero', | 26 | month2: 'Febrero', |
src/locale/lang/fr-FR.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'fr-FR', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Sélectionnez', | 5 | placeholder: 'Sélectionnez', |
| 5 | noMatch: 'Aucun résultat', | 6 | noMatch: 'Aucun résultat', |
| @@ -19,7 +20,8 @@ export default { | @@ -19,7 +20,8 @@ export default { | ||
| 19 | endTime: 'Heure de fin', | 20 | endTime: 'Heure de fin', |
| 20 | clear: 'Annuler', | 21 | clear: 'Annuler', |
| 21 | ok: 'OK', | 22 | ok: 'OK', |
| 22 | - month: '', | 23 | + datePanelLabel: '[mmmm] [yyyy]', |
| 24 | + month: 'Mois', | ||
| 23 | month1: 'Janvier', | 25 | month1: 'Janvier', |
| 24 | month2: 'Février', | 26 | month2: 'Février', |
| 25 | month3: 'Mars', | 27 | month3: 'Mars', |
| @@ -32,7 +34,7 @@ export default { | @@ -32,7 +34,7 @@ export default { | ||
| 32 | month10: 'Octobre', | 34 | month10: 'Octobre', |
| 33 | month11: 'Novembre', | 35 | month11: 'Novembre', |
| 34 | month12: 'Decembre', | 36 | month12: 'Decembre', |
| 35 | - year: '', | 37 | + year: 'An', |
| 36 | weekStartDay: '1', | 38 | weekStartDay: '1', |
| 37 | weeks: { | 39 | weeks: { |
| 38 | sun: 'Dim', | 40 | sun: 'Dim', |
src/locale/lang/id-ID.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'id-ID', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Pilih', | 5 | placeholder: 'Pilih', |
| 5 | noMatch: 'Tidak ada data yang cocok', | 6 | noMatch: 'Tidak ada data yang cocok', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Waktu Selesai', | 20 | endTime: 'Waktu Selesai', |
| 20 | clear: 'Bersihkan', | 21 | clear: 'Bersihkan', |
| 21 | ok: 'OK', | 22 | ok: 'OK', |
| 23 | + datePanelLabel: '[mmmm] [yyyy]', | ||
| 22 | month: '', | 24 | month: '', |
| 23 | month1: 'Januari', | 25 | month1: 'Januari', |
| 24 | month2: 'Februari', | 26 | month2: 'Februari', |
src/locale/lang/ja-JP.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'ja-JP', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: '選んでください', | 5 | placeholder: '選んでください', |
| 5 | noMatch: 'マッチするデータなし', | 6 | noMatch: 'マッチするデータなし', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: '終了時間', | 20 | endTime: '終了時間', |
| 20 | clear: 'クリーア', | 21 | clear: 'クリーア', |
| 21 | ok: '確定', | 22 | ok: '確定', |
| 23 | + datePanelLabel: '[yyyy] [mmmm]', | ||
| 22 | month: '月', | 24 | month: '月', |
| 23 | month1: '1 月', | 25 | month1: '1 月', |
| 24 | month2: '2 月', | 26 | month2: '2 月', |
src/locale/lang/ko-KR.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'ko-KR', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: '선택', | 5 | placeholder: '선택', |
| 5 | noMatch: '일치하는 데이터 없음', | 6 | noMatch: '일치하는 데이터 없음', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: '종료 시간', | 20 | endTime: '종료 시간', |
| 20 | clear: '삭제', | 21 | clear: '삭제', |
| 21 | ok: '예', | 22 | ok: '예', |
| 23 | + datePanelLabel: '[yyyy년] [m월]', | ||
| 22 | month: '월', | 24 | month: '월', |
| 23 | month1: '1월', | 25 | month1: '1월', |
| 24 | month2: '2월', | 26 | month2: '2월', |
src/locale/lang/pt-BR.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'pt-BR', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Selecionar', | 5 | placeholder: 'Selecionar', |
| 5 | noMatch: 'Não encontrado', | 6 | noMatch: 'Não encontrado', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Hora final', | 20 | endTime: 'Hora final', |
| 20 | clear: 'Limpar', | 21 | clear: 'Limpar', |
| 21 | ok: 'Confirmar', | 22 | ok: 'Confirmar', |
| 23 | + datePanelLabel: '[mmmm] de [yyyy]', | ||
| 22 | month: 'Mês', | 24 | month: 'Mês', |
| 23 | month1: 'Janeiro', | 25 | month1: 'Janeiro', |
| 24 | month2: 'Fevereiro', | 26 | month2: 'Fevereiro', |
src/locale/lang/pt-PT.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'pt-PT', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Selecionar', | 5 | placeholder: 'Selecionar', |
| 5 | noMatch: 'Não encontrado', | 6 | noMatch: 'Não encontrado', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Hora final', | 20 | endTime: 'Hora final', |
| 20 | clear: 'Limpar', | 21 | clear: 'Limpar', |
| 21 | ok: 'Confirmar', | 22 | ok: 'Confirmar', |
| 23 | + datePanelLabel: '[mmmm] de [yyyy]', | ||
| 22 | month: 'Mês', | 24 | month: 'Mês', |
| 23 | month1: 'Janeiro', | 25 | month1: 'Janeiro', |
| 24 | month2: 'Fevereiro', | 26 | month2: 'Fevereiro', |
src/locale/lang/ru-RU.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'ru-RU', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Выбрать', | 5 | placeholder: 'Выбрать', |
| 5 | noMatch: 'Нет соответствующих данных', | 6 | noMatch: 'Нет соответствующих данных', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Конечное время', | 20 | endTime: 'Конечное время', |
| 20 | clear: 'Очистить', | 21 | clear: 'Очистить', |
| 21 | ok: 'OK', | 22 | ok: 'OK', |
| 23 | + datePanelLabel: '[Mmmm] [yyyy]', | ||
| 22 | month: '', | 24 | month: '', |
| 23 | month1: 'Январь', | 25 | month1: 'Январь', |
| 24 | month2: 'Февраль', | 26 | month2: 'Февраль', |
src/locale/lang/sv-SE.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'sv-SE', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Välj', | 5 | placeholder: 'Välj', |
| 5 | noMatch: 'Ingen träff', | 6 | noMatch: 'Ingen träff', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Slut tid', | 20 | endTime: 'Slut tid', |
| 20 | clear: 'Rensa', | 21 | clear: 'Rensa', |
| 21 | ok: 'Ok', | 22 | ok: 'Ok', |
| 23 | + datePanelLabel: '[mmmm] [yyyy]', | ||
| 22 | month: 'Månad', | 24 | month: 'Månad', |
| 23 | month1: 'Januari', | 25 | month1: 'Januari', |
| 24 | month2: 'Februari', | 26 | month2: 'Februari', |
src/locale/lang/tr-TR.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'tr-TR', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Seç', | 5 | placeholder: 'Seç', |
| 5 | noMatch: 'Eşleşen veri yok', | 6 | noMatch: 'Eşleşen veri yok', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Bitişe', | 20 | endTime: 'Bitişe', |
| 20 | clear: 'Temizle', | 21 | clear: 'Temizle', |
| 21 | ok: 'Tamam', | 22 | ok: 'Tamam', |
| 23 | + datePanelLabel: '[mmmm] [yyyy]', | ||
| 22 | month: '', | 24 | month: '', |
| 23 | month1: 'Ocak', | 25 | month1: 'Ocak', |
| 24 | month2: 'Şubat', | 26 | month2: 'Şubat', |
src/locale/lang/vi-VN.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'vi-VN', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: 'Chọn', | 5 | placeholder: 'Chọn', |
| 5 | noMatch: 'Không tìm thấy', | 6 | noMatch: 'Không tìm thấy', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: 'Ngày kết thúc', | 20 | endTime: 'Ngày kết thúc', |
| 20 | clear: 'Xóa', | 21 | clear: 'Xóa', |
| 21 | ok: 'Đồng ý', | 22 | ok: 'Đồng ý', |
| 23 | + datePanelLabel: '[Tháng mm]/[yyyy]', | ||
| 22 | month: '', | 24 | month: '', |
| 23 | month1: 'Tháng 1', | 25 | month1: 'Tháng 1', |
| 24 | month2: 'Tháng 2', | 26 | month2: 'Tháng 2', |
src/locale/lang/zh-CN.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'zh-CN', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: '请选择', | 5 | placeholder: '请选择', |
| 5 | noMatch: '无匹配数据', | 6 | noMatch: '无匹配数据', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: '结束时间', | 20 | endTime: '结束时间', |
| 20 | clear: '清空', | 21 | clear: '清空', |
| 21 | ok: '确定', | 22 | ok: '确定', |
| 23 | + datePanelLabel: '[yyyy年] [m月]', | ||
| 22 | month: '月', | 24 | month: '月', |
| 23 | month1: '1 月', | 25 | month1: '1 月', |
| 24 | month2: '2 月', | 26 | month2: '2 月', |
src/locale/lang/zh-TW.js
| 1 | export default { | 1 | export default { |
| 2 | i: { | 2 | i: { |
| 3 | + locale: 'zh-TW', | ||
| 3 | select: { | 4 | select: { |
| 4 | placeholder: '請選擇', | 5 | placeholder: '請選擇', |
| 5 | noMatch: '無匹配數據', | 6 | noMatch: '無匹配數據', |
| @@ -19,6 +20,7 @@ export default { | @@ -19,6 +20,7 @@ export default { | ||
| 19 | endTime: '結束時間', | 20 | endTime: '結束時間', |
| 20 | clear: '清空', | 21 | clear: '清空', |
| 21 | ok: '確定', | 22 | ok: '確定', |
| 23 | + datePanelLabel: '[yyyy] [mmmm]', | ||
| 22 | month: '月', | 24 | month: '月', |
| 23 | month1: '1 月', | 25 | month1: '1 月', |
| 24 | month2: '2 月', | 26 | month2: '2 月', |