fix(datetime-picker): 修复日期选择器格式化问题并添加中文显示
修改datetime-picker组件,强制使用中文格式显示年月日时分 更新项目文档说明此组件的自定义修改注意事项
Showing
2 changed files
with
55 additions
and
10 deletions
| ... | @@ -97,7 +97,30 @@ VantComponent({ | ... | @@ -97,7 +97,30 @@ VantComponent({ |
| 97 | return this.picker; | 97 | return this.picker; |
| 98 | }, | 98 | }, |
| 99 | updateColumns() { | 99 | updateColumns() { |
| 100 | - const { formatter = defaultFormatter } = this.data; | 100 | + // const { formatter = defaultFormatter } = this.data; |
| 101 | + let { formatter } = this.data; | ||
| 102 | + if (defaultFormatter) { | ||
| 103 | + formatter = defaultFormatter; | ||
| 104 | + } | ||
| 105 | + // 默认写死配置 | ||
| 106 | + formatter = (type, value) => { | ||
| 107 | + if (type === 'year') { | ||
| 108 | + return `${value}年`; | ||
| 109 | + } | ||
| 110 | + if (type === 'month') { | ||
| 111 | + return `${value}月`; | ||
| 112 | + } | ||
| 113 | + if (type === 'day') { | ||
| 114 | + return `${value}日`; | ||
| 115 | + } | ||
| 116 | + if (type === 'hour') { | ||
| 117 | + return `${value}时`; | ||
| 118 | + } | ||
| 119 | + if (type === 'minute') { | ||
| 120 | + return `${value}分`; | ||
| 121 | + } | ||
| 122 | + return value; | ||
| 123 | + } | ||
| 101 | const results = this.getOriginColumns().map((column) => ({ | 124 | const results = this.getOriginColumns().map((column) => ({ |
| 102 | values: column.values.map((value) => formatter(column.type, value)), | 125 | values: column.values.map((value) => formatter(column.type, value)), |
| 103 | })); | 126 | })); |
| ... | @@ -262,7 +285,27 @@ VantComponent({ | ... | @@ -262,7 +285,27 @@ VantComponent({ |
| 262 | updateColumnValue(value) { | 285 | updateColumnValue(value) { |
| 263 | let values = []; | 286 | let values = []; |
| 264 | const { type } = this.data; | 287 | const { type } = this.data; |
| 265 | - const formatter = this.data.formatter || defaultFormatter; | 288 | + let formatter = this.data.formatter || defaultFormatter; |
| 289 | + // 默认写死配置 | ||
| 290 | + formatter = (type, value) => { | ||
| 291 | + if (type === 'year') { | ||
| 292 | + return `${value}年`; | ||
| 293 | + } | ||
| 294 | + if (type === 'month') { | ||
| 295 | + return `${value}月`; | ||
| 296 | + } | ||
| 297 | + if (type === 'day') { | ||
| 298 | + return `${value}日`; | ||
| 299 | + } | ||
| 300 | + if (type === 'hour') { | ||
| 301 | + return `${value}时`; | ||
| 302 | + } | ||
| 303 | + if (type === 'minute') { | ||
| 304 | + return `${value}分`; | ||
| 305 | + } | ||
| 306 | + return value; | ||
| 307 | + } | ||
| 308 | + | ||
| 266 | const picker = this.getPicker(); | 309 | const picker = this.getPicker(); |
| 267 | if (type === 'time') { | 310 | if (type === 'time') { |
| 268 | const pair = value.split(':'); | 311 | const pair = value.split(':'); | ... | ... |
| ... | @@ -2,11 +2,11 @@ | ... | @@ -2,11 +2,11 @@ |
| 2 | 2 | ||
| 3 | ## 项目概述 | 3 | ## 项目概述 |
| 4 | 4 | ||
| 5 | -**项目名称**: 静待花开-活动小助手 (swx-weapp) | 5 | +**项目名称**: 静待花开-活动小助手 (swx-weapp) |
| 6 | -**项目版本**: 1.0.0 | 6 | +**项目版本**: 1.0.0 |
| 7 | -**项目类型**: 微信小程序 | 7 | +**项目类型**: 微信小程序 |
| 8 | -**开发框架**: Taro 3.4.10 + Vue 3 + Vant Weapp | 8 | +**开发框架**: Taro 3.4.10 + Vue 3 + Vant Weapp |
| 9 | -**Node.js版本**: 16.14.2 | 9 | +**Node.js版本**: 16.14.2 |
| 10 | 10 | ||
| 11 | ## 技术栈 | 11 | ## 技术栈 |
| 12 | 12 | ||
| ... | @@ -301,8 +301,8 @@ npm run build:weapp | ... | @@ -301,8 +301,8 @@ npm run build:weapp |
| 301 | service.interceptors.request.use( | 301 | service.interceptors.request.use( |
| 302 | config => { | 302 | config => { |
| 303 | // POST 请求数据序列化(排除上传接口) | 303 | // POST 请求数据序列化(排除上传接口) |
| 304 | - config.data = config.method === 'post' && | 304 | + config.data = config.method === 'post' && |
| 305 | - !strExist(['a=upload', 'upload.qiniup.com'], config.url) | 305 | + !strExist(['a=upload', 'upload.qiniup.com'], config.url) |
| 306 | ? qs.stringify(config.data) : config.data; | 306 | ? qs.stringify(config.data) : config.data; |
| 307 | return config | 307 | return config |
| 308 | } | 308 | } |
| ... | @@ -353,6 +353,8 @@ Taro.login({ | ... | @@ -353,6 +353,8 @@ Taro.login({ |
| 353 | 5. 查看参与状态 | 353 | 5. 查看参与状态 |
| 354 | 354 | ||
| 355 | ## 维护和扩展 | 355 | ## 维护和扩展 |
| 356 | +1. 更新时候注意事项 | ||
| 357 | + - datetime-picker 组件有一部分写死修改,需要注意不要修改 | ||
| 356 | 358 | ||
| 357 | ### 添加新页面 | 359 | ### 添加新页面 |
| 358 | 1. 在 `src/pages/` 下创建页面目录 | 360 | 1. 在 `src/pages/` 下创建页面目录 |
| ... | @@ -373,4 +375,4 @@ Taro.login({ | ... | @@ -373,4 +375,4 @@ Taro.login({ |
| 373 | 375 | ||
| 374 | **文档更新日期**: 2024年12月 | 376 | **文档更新日期**: 2024年12月 |
| 375 | **维护人员**: 开发团队 | 377 | **维护人员**: 开发团队 |
| 376 | -**联系方式**: hookehuyr@gmail.com | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 378 | +**联系方式**: hookehuyr@gmail.com | ... | ... |
-
Please register or login to post a comment