antdv 時間元件(RangePicker) 分鐘只顯示 00 和30

岁月记忆發表於2024-05-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,
    },

相關文章