antd 3.x时间范围选择器，选择时间后怎么让值合并成一个倒着的字符串传给后端？

发布于
2024-04-16 山东

更新于
2024-04-16

antd组件库时间选择器，选择时间段开始时间和结束时间。选择后是一个数组，转成字符串后怎么倒着显示？

这个是循环的，点击右边的小+号可以添加，就是可以添加第二次第三次这样的
选择了一个时间段，控制台打印的就是["开始时间","结束时间"]这样的数据。但是后端需要的是["22,16，2，10"]这样的数据。选择完需要让值倒着给后端传过去

如果前面的日期也选择了的话，后端需要的数据格式就是["22,16，2，10","16,4"]这样的格式
像是选择了01 02 03 04这样的时间给后端传参之前怎么把0去掉呢？

<div class="form-container">
                <div v-for="(i, index) in yearCheck" :key="index" class="form-item-container">
                    <a-form-item 
                        :label="i.label" 
                        :name="['yearCheck.' + index + '.first']"
                        :rules="yearFormRules.first"
                        :label-col="{ span: 7 }"
                    >
                        <a-space direction="horizontal">
                            <a-date-picker v-model:value="i.first" value-format="MM-DD" style="width:240px;margin-right:70px" format="MM-DD" @change="handleDateChange"/>   
                        </a-space>
                    </a-form-item>
                    <a-form-item 
                        :name="['yearCheck.' + index + '.yearTimer']"
                        :rules="yearFormRules.yearTimer"
                    >
                        <a-space direction="horizontal">
                            <a-time-range-picker v-model:value="i.yearTimer" style="width:240px" @change="changePick" value-format="HH:mm" format="HH:mm"   />
                            <plus-circle-outlined  @click="addFormItem(index)" v-if="index === yearCheck.length - 1"/>
                            <minus-circle-outlined v-if="index > 0" @click="removeFormItem(index)"/>
                        </a-space>
                    </a-form-item>
                </div>
            </div>

changePick(timeRange) {
        console.log(timeRange);
        const times = timeRange.map(time => {
        const [hour, minute] = time.split(':');
        return `${minute},${hour}`;
    });
        const result = times.join(',');
        console.log(result);   
    },

写了一个change事件去把时间选择器的数组转成字符串。但是为什么现在控制台打印的确是02,10,22,16这样的啊？这个应该怎么具体去解决呀各位大佬

添加第一次的字符串是"22,16,2,10,16,4"是这样的
添加第二次也是这样的。但是最后是一个数组["22,16,2,10,16,4","第二次添加的时间和日期"]

前端 javascript vue.js

阅读 718

AI BotBETA

您遇到的问题是时间格式转换的问题。在您的代码中，您尝试将时间字符串（例如"10:02"）分割为小时和分钟，然后再重新组合它们，但是您错误地将分钟和小时的顺序颠倒了。另外，当分钟或小时为单个数字时，您可能需要添加前导零以确保它们是两位数。

您可以通过以下方式解决此问题：

在将小时和分钟拆分为数组后，确保它们的顺序是正确的。
使用padStart函数确保小时和分钟都是两位数。

以下是根据您的需求修改后的changePick方法：

changePick(timeRange) {
    const times = timeRange.map(time => {
        const [hour, minute] = time.split(':').map(value => parseInt(value, 10));
        // 使用padStart确保小时和分钟都是两位数
        return `${minute.toString().padStart(2, '0')},${hour.toString().padStart(2, '0')}`;
    });
    const result = times.join(',');
    console.log(result);
},

这样，当您选择时间范围时，changePick方法将按照您期望的格式（例如"10,02"）输出时间字符串。如果有多个时间段，它们将按照您提供的示例格式（例如"10,02,14,04"）进行组合。

另外，请注意，我在padStart函数中使用了'0'作为填充字符，以确保当分钟或小时为单个数字时，它们前面会添加一个零。

2 个回答

得票最新

边城

59.8k157274

发布于
2024-04-16 四川

✓ 已被采纳

控制台打印的就是["开始时间","结束时间"]这样的数据

要得到正确的数据，不一定非要在控件上面去想办法。有 changePick 函数，却不是一定要作为事件来使用。完全可以拿到原始数据，再通过一个计算属性，使用 chnagePick 把它转换成你需要的样子

另外，在 changePick 的处理上，可以先按原顺序处理成数组，再 reverse() 翻转，最后重新拼接成字符串：

function changePick(timeRange) {
    // console.log(timeRange);
    const times = timeRange
        .flatMap(time => {
//       ^^^^^^^ 注意用的 flatMap，把两层数组展开成一层
            const [hour, minute] = time.split(":");
            return [hour, minute];
//                 ^^^^^^^^^^^^^^ 保持原来的顺序
        });
    return times.reverse().join(",");
//               ^^^^^^^^^ 先反转
//                         ^^^^^ 再拼接    
}