适用于vue3的vant4组件 没有日期时间选择器

项目中需要用到日期和时间一同选择的场景
本来想用 如下代码 van-datetime-picker 发现咋整也不好使 刚开始还以为是引入的问题 后来发现是vant4根本就没这玩应了…

<van-datetime-picker
  v-model="currentDate"
  type="datetime"
  title="选择完整时间"
  :min-date="minDate"
  :max-date="maxDate"
/>

在这里插入图片描述
官网文档vant4的DatePicker是没有的
在这里插入图片描述
vant2才有

后来没招了 把日期和时间分开写了

      	<van-field
         	v-model="date"
           is-link
           name="日期"
           label="日期"
           placeholder="请选择日期"
           @click="showDatePopup = true"
         />
         <van-popup v-model:show="showDatePopup" round position="bottom">
           <van-date-picker v-model="currentDate" type="datetime" title="选择日期" @confirm="onDateConfirm" />
         </van-popup>

         <van-field
            v-model="time"
            is-link
            name="时间"
            label="时间"
            placeholder="请选择时间"
            @click="showTimePopup = true"
          />
          <van-popup v-model:show="showTimePopup" round position="bottom">
            <van-time-picker v-model="currentTime" title="选择时间" @confirm="onTimeConfirm" />
          </van-popup>
data() {
    return {     
      showDatePopup: false,
      showTimePopup: false,    
        
      date: '',
      time: '',

      currentDate: [],
      currentTime: [],
    }
  },
	onDateConfirm() {
      this.showDatePopup = false
      this.date = this.currentDate[0] + '-' + this.currentDate[1] + '-' + this.currentDate[2]
    },

    onTimeConfirm() {
      this.showTimePopup = false
      this.time = this.currentTime[0] + ':' + this.currentTime[1]
    },

最后提交的时候 将日期和时间拼接 补00

	obj.realityTime = this.date + ' ' + this.time + '00'

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,可以使用 Vant 4.x 中的 Cascader 级联选择器组件。在 Cascader 中,可以通过配置 options 属性来设置级联数据源,然后通过配置 value 属性来获取用户选择的数据。同时,Cascader 还提供了 slot 来自定义显示内容,可以根据自己的需求来进行定制。 对于多选,可以使用 Vant 4.x 中的 Checkbox 复选框组件。在 Cascader 中,可以通过配置 show-checkbox 属性来开启多选模式,然后通过配置 checked-options 属性来获取用户选择的数据。 下面是一个简单的示例代码: ```html <van-cascader :options="options" :value="value" :show-checkbox="true" :checked-options="checkedOptions" @change="handleChange" > <template #title="{option}"> <van-checkbox v-model="option.checked">{{ option.label }}</van-checkbox> </template> </van-cascader> ``` ```javascript export default { data() { return { options: [ { value: 'beijing', label: '北京', children: [ { value: 'haidian', label: '海淀区', }, { value: 'chaoyang', label: '朝阳区', }, ], }, { value: 'shanghai', label: '上海', children: [ { value: 'pudong', label: '浦东新区', }, { value: 'minhang', label: '闵行区', }, ], }, ], value: [], checkedOptions: [], }; }, methods: { handleChange(value, selectedOptions, checkedOptions) { this.value = value; this.checkedOptions = checkedOptions; }, }, }; ``` 在上面的代码中,我们通过配置 options 属性来设置级联数据源,通过配置 value 和 checkedOptions 属性来获取用户选择的数据。同时,我们使用了 slot 来自定义级联选择器的显示内容,将每个选项的 label 和 checkbox 组合在一起。最后,我们监听了 Cascader 的 change 事件,在事件处理函数中更新 value 和 checkedOptions 的值。 希望这个示例代码能够帮助到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值