antdv 时间组件(RangePicker) 分钟只显示 00 和30

{
      label: '',
      field: 'trainingDate',
      component: 'RangePicker',
      componentProps: {

　　　　　　format: 'YYYY-MM-DD HH:mm:00',

          valueFormat: 'YYYY-MM-DD HH:mm:00',

          minuteStep: 30,

          showTime: true,

      },
      required: true,
    },

 设置好后，会发现一个问题！在时间控件中选择一个日期，会自动出现 当前的分钟数，只有去点击 分钟，才会确定是 00 或 30

 这对懒人用户来说 相当不友好！！！

解决办法： 用 onChange事件 改变 时间控件的值，用 render 函数 渲染 时间组件的值

需要引入

import { h } from 'vue'
import { RangePicker } from 'ant-design-vue'
import dayjs from 'dayjs'

 

{
      label: '',
      field: 'trainingDate',
      component: 'RangePicker',
      render: ({ model, field }) => {
        return h(RangePicker, {
          format: 'YYYY-MM-DD HH:mm:00',
          valueFormat: 'YYYY-MM-DD HH:mm:00',
          minuteStep: 30,
          showTime: true,

          value: model[field],
          onChange: (value, timeString) => {
            let str = ''
            // 如果分钟数小于30，则将分钟数置为0，否则分钟数置为30
            if (new Date(value[0]).getMinutes() < 30) {
              str = 'YYYY-MM-DD HH:00:00'
            } else {
              str = 'YYYY-MM-DD HH:30:00'
            }
            timeString[0] = dayjs(value[0]).format(str)
            // 如果分钟数小于30，则将分钟数置为0，否则分钟数置为30
            if (new Date(value[1]).getMinutes() < 30) {
              str = 'YYYY-MM-DD HH:00:00'
            } else {
              str = 'YYYY-MM-DD HH:30:00'
            }
            timeString[1] = dayjs(value[1]).format(str)

            model[field] = timeString
          },
        })
      },
      required: true,
    },