Skip to content

Commit 5d3d547

Browse files
mengxiong10mengxiong10
committed
feat: add prop formatter to replace the object usage of format 
1 parent 7763a8d commit 5d3d547

File tree

5 files changed

+97
-72
lines changed

5 files changed

+97
-72
lines changed

‎README.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ You can also override some of the default locale by `lang`.
116116
| type | select the type of picker | date \|datetime\|year\|month\|time\|week | 'date' |
117117
| range | if true, pick the range date | `boolean` | false |
118118
| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' |
119+
| formatter | use your own formatter, such as moment.js | [object](#formatter) | - |
119120
| value-type | data type of the binding value | [value-type](#value-type) | 'date' |
120121
| default-value | default date of the calendar | `Date` | new Date() |
121122
| lang | override the default locale | `object` | |
@@ -194,26 +195,30 @@ You can also override some of the default locale by `lang`.
194195
| Unix Timestamp | X | 1360013296 |
195196
| Unix Millisecond Timestamp | x | 1360013296123 |
196197

197-
#### custom format
198+
#### formatter
198199

199-
The `format` accepts an object to customize formatting.
200+
The `formatter` accepts an object to customize formatting.
200201

201202
```html
202-
<date-picker :format="momentFormat" />
203+
<date-picker :formatter="momentFormat" />
203204
```
204205

205206
```js
206207
data() {
207208
return {
208209
// Use moment.js instead of the default
209210
momentFormat: {
210-
// Date to String
211+
//[optional] Date to String
211212
stringify: (date) => {
212213
return date ? moment(date).format('LL') : ''
213214
},
214-
// String to Date
215+
//[optional] String to Date
215216
parse: (value) => {
216217
return value ? moment(value, 'LL').toDate() : null
218+
},
219+
//[optional] getWeekNumber
220+
getWeek: (date) => {
221+
return // a number
217222
}
218223
}
219224
}
@@ -309,7 +314,6 @@ If you find this project useful, you can buy me a coffee
309314

310315
![donate](https://user-images.githubusercontent.com/14135808/83999111-a7947600-a994-11ea-84e9-9a215def4155.png)
311316

312-
313317
## License
314318

315319
[MIT](https://github.com/mengxiong10/vue2-datepicker/blob/master/LICENSE)

‎README.zh-CN.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ import 'vue2-datepicker/locale/zh-cn';
114114
| type | 日期选择的类型 | date \|datetime\|year\|month\|time\|week | 'date' |
115115
| range | 如果是 true, 变成日期范围选择 | `boolean` | false |
116116
| format | 设置格式化的 token, 类似 moment.js | [token](#token) | 'YYYY-MM-DD' |
117+
| formatter | 使用自己的格式化程序, 比如 moment.js | [object](#formatter) | - |
117118
| value-type | 设置绑定值的类型 | [value-type](#value-type) | 'date' |
118119
| default-value | 设置日历默认的时间 | `Date` | new Date() |
119120
| lang | 覆盖默认的语音设置 | `object` | |
@@ -192,26 +193,30 @@ import 'vue2-datepicker/locale/zh-cn';
192193
| Unix Timestamp | X | 1360013296 |
193194
| Unix Millisecond Timestamp | x | 1360013296123 |
194195

195-
#### custom format
196+
#### formatter
196197

197-
`format` 接受一个对象去自定义格式化
198+
`formatter` 接受一个对象去自定义格式化
198199

199200
```html
200-
<date-picker :format="momentFormat" />
201+
<date-picker :formatter="momentFormat" />
201202
```
202203

203204
```js
204205
data() {
205206
return {
206207
// 使用moment.js 替换默认
207208
momentFormat: {
208-
// Date to String
209+
//[可选] Date to String
209210
stringify: (date) => {
210211
return date ? moment(date).format('LL') : ''
211212
},
212-
// String to Date
213+
//[可选] String to Date
213214
parse: (value) => {
214215
return value ? moment(value, 'LL').toDate() : null
216+
},
217+
//[可选] getWeekNumber
218+
getWeek: (date) => {
219+
return // a number
215220
}
216221
}
217222
}

‎__test__/__snapshots__/date-picker.test.js.snap‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,58 @@ exports[`DatePicker prop: clearable 1`] = `
9292
</div>
9393
`;
9494

95-
exports[`DatePicker prop: custom format 1`] = `
95+
exports[`DatePicker prop: editable 1`] = `
96+
<div
97+
class="mx-datepicker"
98+
>
99+
<div
100+
class="mx-input-wrapper"
101+
>
102+
<input
103+
autocomplete="off"
104+
class="mx-input"
105+
name="date"
106+
placeholder=""
107+
readonly="readonly"
108+
type="text"
109+
/>
110+
111+
<i
112+
class="mx-icon-clear"
113+
>
114+
<icon-close-stub />
115+
</i>
116+
117+
<i
118+
class="mx-icon-calendar"
119+
>
120+
<icon-calendar-stub />
121+
</i>
122+
</div>
123+
124+
<popup-stub
125+
appendtobody="true"
126+
>
127+
<!---->
128+
129+
<div
130+
class="mx-datepicker-content"
131+
>
132+
<!---->
133+
134+
<div
135+
class="mx-datepicker-body"
136+
>
137+
<div />
138+
</div>
139+
140+
<!---->
141+
</div>
142+
</popup-stub>
143+
</div>
144+
`;
145+
146+
exports[`DatePicker prop: formatter 1`] = `
96147
<table
97148
class="mx-table mx-table-date"
98149
>
@@ -580,54 +631,3 @@ exports[`DatePicker prop: custom format 1`] = `
580631
</tbody>
581632
</table>
582633
`;
583-
584-
exports[`DatePicker prop: editable 1`] = `
585-
<div
586-
class="mx-datepicker"
587-
>
588-
<div
589-
class="mx-input-wrapper"
590-
>
591-
<input
592-
autocomplete="off"
593-
class="mx-input"
594-
name="date"
595-
placeholder=""
596-
readonly="readonly"
597-
type="text"
598-
/>
599-
600-
<i
601-
class="mx-icon-clear"
602-
>
603-
<icon-close-stub />
604-
</i>
605-
606-
<i
607-
class="mx-icon-calendar"
608-
>
609-
<icon-calendar-stub />
610-
</i>
611-
</div>
612-
613-
<popup-stub
614-
appendtobody="true"
615-
>
616-
<!---->
617-
618-
<div
619-
class="mx-datepicker-content"
620-
>
621-
<!---->
622-
623-
<div
624-
class="mx-datepicker-body"
625-
>
626-
<div />
627-
</div>
628-
629-
<!---->
630-
</div>
631-
</popup-stub>
632-
</div>
633-
`;

‎__test__/date-picker.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,14 @@ describe('DatePicker', () => {
135135
expect(input.value).toBe('2019/10/10');
136136
});
137137

138-
it('prop: custom format', () => {
138+
it('prop: formatter', () => {
139139
wrapper = mount(DatePicker, {
140140
propsData: {
141141
valueType: 'format',
142142
value: '13/10/2019',
143143
open: true,
144144
type: 'week',
145-
format: {
145+
formatter: {
146146
stringify(date) {
147147
return format(date, 'dd/MM/yyyy');
148148
},

‎src/date-picker.vue‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export default {
168168
default: 'date',
169169
},
170170
format: {
171-
type: [String, Object],
171+
type: String,
172172
default() {
173173
const map = {
174174
date: 'YYYY-MM-DD',
@@ -181,6 +181,9 @@ export default {
181181
return map[this.type] || map.date;
182182
},
183183
},
184+
formatter: {
185+
type: Object,
186+
},
184187
range: {
185188
type: Boolean,
186189
default: false,
@@ -347,29 +350,42 @@ export default {
347350
},
348351
},
349352
},
353+
created() {
354+
if (typeof this.format === 'object') {
355+
console.warn(
356+
"[vue2-datepicker]: The prop `format` don't support Object any more. You can use the new prop `formatter` to replace it"
357+
);
358+
}
359+
},
350360
methods: {
351361
handleClickOutSide(evt) {
352362
const { target } = evt;
353363
if (!this.$el.contains(target)) {
354364
this.closePopup();
355365
}
356366
},
367+
getFormatter(key) {
368+
return (
369+
(isObject(this.formatter) && this.formatter[key]) ||
370+
(isObject(this.format) && this.format[key])
371+
);
372+
},
357373
getWeek(date, options) {
358-
if (isObject(this.format) && typeof this.format.getWeek === 'function') {
359-
return this.format.getWeek(date, options);
374+
if (typeof this.getFormatter('getWeek') === 'function') {
375+
return this.getFormatter('getWeek')(date, options);
360376
}
361377
return getWeek(date, options);
362378
},
363379
parseDate(value, fmt) {
364-
if (isObject(this.format) && typeof this.format.parse === 'function') {
365-
return this.format.parse(value, fmt);
380+
if (typeof this.getFormatter('parse') === 'function') {
381+
return this.getFormatter('parse')(value, fmt);
366382
}
367383
const backupDate = new Date();
368384
return parse(value, fmt, { locale: this.locale.formatLocale, backupDate });
369385
},
370386
formatDate(date, fmt) {
371-
if (isObject(this.format) && typeof this.format.stringify === 'function') {
372-
return this.format.stringify(date, fmt);
387+
if (typeof this.getFormatter('stringify') === 'function') {
388+
return this.getFormatter('stringify')(date, fmt);
373389
}
374390
return format(date, fmt, { locale: this.locale.formatLocale });
375391
},

0 commit comments

Comments
 (0)