vant 2组起始时间插件并存

 <!--            开始时间-->
            <van-field
              is-link
              readonly
              clickable
              required
              name="picker"
              :value="date"
              label="教育开始时间"
              placeholder="请选择"
              @click="startData = true"

            />
            <van-popup v-model="startData" position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConSdata"
              />

            </van-popup>
<!--            结束时间-->
            <van-field
              is-link
              readonly
              clickable
              required
              name="picker"
              :value="dateend"
              label="教育结束时间"
              placeholder="请选择"
              @click="endData = true"

            />
            <van-popup v-model="endData" position="bottom">
              <van-datetime-picker
                v-model="currentDateend"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConEdata"

              />
            </van-popup>
date: '',//开始时间
dateend: '',//结束时间
startData: false,//显示开始时间弹框
endData: false,//显示结束时间弹框
formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    formatDate(dateend) {
      return `${dateend.getFullYear()}/${dateend.getMonth() + 1}/${dateend.getDate()}`;
    },
    // 开始时间弹框
    onConSdata(date) {

      this.startData = false;
      this.date = this.formatDate(date);
    },
    // 结束时间弹框
    onConEdata(dateend) {
      this.endData = false;
      this.dateend = this.formatDate(dateend);
    },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant2 datetimepicker 是一个用于处理时间选择的件。它可以让用户在移动设备或者电脑上方便地选择日期和时间vant2 datetimepicker 的使用非常简单。首先,你需要在你的项目中安装 vant2 件库,并引入 datetimepicker 件。然后,在需要使用时间选择功能的地方,直接使用 `<van-datetime-picker>` 标签即可。你可以通过给该件的属性传递不同的值来定制时间选择器的外观和功能。 vant2 datetimepicker 提供了多种属性可以进行配置。例如,你可以通过 `value` 属性设置选择框的默认值,通过 `type` 属性设置选择器的类型,可以选择只选择日期、只选择时间,或者同时选择日期和时间。你还可以通过 `min-date` 和 `max-date` 属性设置选择器的可选范围。此外,在选择日期的时候,你可以使用 `formatter` 属性自定义日期的展示格式。 vant2 datetimeicker 还提供了一些事件供你处理时间选择的逻辑。例如,你可以通过 `@confirm` 事件获取用户选择的时间,并进行后续的处理。你还可以通过 `@cancel` 事件,在用户取消选择的时候执行相应的操作。 总的来说,vant2 datetimepicker 是一个功能强大、灵活易用的时间选择件。它可以帮助你方便地处理时间选择的需求,并提供丰富的配置选项和事件,以满足不同的使用场景。无论是在移动设备还是电脑上,vant2 datetimepicker 都能为用户提供良好的交互体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值