fix(Sku): formater datepicker (#6729)

Co-authored-by: songweite <songweite@youzan.com>

src/sku/components/SkuDateTimeField.js

@@ -7,7 +7,9 @@ import Popup from '../../popup';
 import DateTimePicker from '../../datetime-picker';
 import Field from '../../field';
 
-const [createComponent] = createNamespace('sku-datetime-filed');
+const namespace = createNamespace('sku-datetime-field');
+const createComponent = namespace[0];
+const t = namespace[2];
 
 export default createComponent({
   props: {
@@ -42,6 +44,12 @@ export default createComponent({
     },
   },
 
+  computed: {
+    title() {
+      return t(`title.${this.type}`);
+    },
+  },
+
   methods: {
     onClick() {
       this.showDatePicker = true;
@@ -57,6 +65,10 @@ export default createComponent({
     onCancel() {
       this.showDatePicker = false;
     },
+    formatter(type, val) {
+      const word = t(`format.${type}`);
+      return `${val}${word}`;
+    },
   },
 
   render() {
@@ -80,7 +92,9 @@ export default createComponent({
         >
           <DateTimePicker
             type={this.type}
+            title={this.title}
             value={this.currentDate}
+            formatter={this.formatter}
             onCancel={this.onCancel}
             onConfirm={this.onConfirm}
           />

src/sku/components/SkuMessages.js

@@ -7,7 +7,7 @@ import { isNumeric } from '../../utils/validate/number';
 import Cell from '../../cell';
 import Field from '../../field';
 import SkuImgUploader from './SkuImgUploader';
-import SkuDateTimeFiled from './SkuDateTimeFiled';
+import SkuDateTimeField from './SkuDateTimeField';
 
 const [createComponent, bem, t] = createNamespace('sku-messages');
 
@@ -136,7 +136,7 @@ export default createComponent({
       const isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
       if (isDateOrTime) {
         return (
-          <SkuDateTimeFiled
+          <SkuDateTimeField
             vModel={this.messageValues[index].value}
             label={message.name}
             key={`${this.goodsId}-${index}`}

src/sku/lang.ts

@@ -59,5 +59,19 @@ export default {
     vanSkuRow: {
       multiple: '可多选',
     },
+    vanSkuDatetimeField: {
+      title: {
+        date: '选择年月日',
+        time: '选择时间',
+        datetime: '选择日期时间',
+      },
+      format: {
+        year: '年',
+        month: '月',
+        day: '日',
+        hour: '时',
+        minute: '分',
+      },
+    },
   },
 };