小程序中vant-weapp时间选择使用方法

最新推荐文章于 2025-06-02 09:02:17 发布

编程小橘子

最新推荐文章于 2025-06-02 09:02:17 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 chrome 前端

本文链接：https://blog.youkuaiyun.com/qq_43353619/article/details/131877210

微信小程序专栏收录该内容

19 篇文章

订阅专栏

这篇文章展示了如何在微信小程序中使用van-cell和van-calendar组件来创建一个选择预约时间的功能。用户可以选择单个日期或日期范围，选定后日期会以指定格式显示。onDisplay、onClose和onConfirm事件处理函数用于控制日历显示和数据处理，formatDate函数则用于格式化日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、选择单个时间点：

wxml：

  <van-cell
      title="选择预约时间"
      value="{{ time }}"
      bind:click="onDisplay"
    />
    <van-calendar
      show="{{ show }}"
      bind:close="onClose"
      bind:confirm="onConfirm"
    />

json：

    "van-cell": "@vant/weapp/cell/index",
    "van-calendar": "@vant/weapp/calendar/index",

js：

   // 选择预约日期
    onDisplay() {
      this.setData({ show: true });
    },
    onClose() {
      this.setData({ show: false });
    },
    formatDate(date) {
      date = new Date(date);
      let str = `${date.getFullYear()}-${date.getMonth() + 1}/${date.getDate()}`;
      console.log(str);
      this.setData({
        time:str
      });
    },
    onConfirm(event) {
      this.setData({
        show: false,
        date: this.formatDate(event.detail),
      });
    },

如图所示，时间只能选一天：
在这里插入图片描述

二、当选择两个时间点时

wxml：

   <van-cell
      title="选择预约时间"
      value="{{ time }}"
      bind:click="onDisplay"
    />
    <van-calendar
      show="{{ show }}"
      bind:close="onClose"
		 bind:confirm="onConfirm"
		 type="range"
    />

js部分：

  // 选择预约日期
    onDisplay(){
      this.setData({ show: true });
    },
    // 当关闭弹出层时
    onClose() {
      this.setData({ show: false });
    },
    formatDate(date) {
      const date0 = new Date(date[0]);
      const date1 = new Date(date[1]);
      console.log(date0)
      return `${date0.getFullYear()}\.${date0.getMonth() + 1}\.${date0.getDate()}-${date1.getMonth() + 1}\.${date1.getDate()}`;
    },
    // 当选着日期点击确认时
    onConfirm(event){
      console.log(event)
      this.setData({
        show: false,
        time: this.formatDate(event.detail),
      });
      // console.log(this.data.time)
    },