使用vant UI实现时间段选择

需求:选择时间段或者选择日期,时间段不允许跨月,选完开始时间后,结束时间可选 "开始日期~当月最后一天"

格式:2023-01-01~2023-01-23 或者 2023-01-01

这里使用vantUI

示例代码:

html 复制代码
<van-field
        label="日期"
        :placeholder="formData.taskDate"
        v-model="formData.taskDate"
        input-align="right"
        :rules="[{ required: true, message: '必填' }]"
        readonly
        label-width="172"
        @click-input="(showDatePick = true)"
      >
        <template #right-icon>
          <van-icon name="arrow-down" @click="showDatePick = true" />
        </template>
  </van-field>
  
 <!-- 日期选择 start -->
    <van-calendar
      v-model="showDatePick"
      @select="onSelectDate"
      @confirm="dateConfirm"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      allow-same-day
    />
    <!-- 日期选择 end -->

示例代码:

js 复制代码
  data(){
  	return{
  	  minDate: new Date(2020, 0, 1),
      maxDate: new Date(2099, 0, 31),
      formData: {
         taskDate: moment(new Date()).format("YYYY-MM-DD"),
      },
      showDatePick: false, //显示日期pop
  	}
  },
  methods: {
    // 限制可选日期,不可跨月
    onSelectDate(e) {
      // 这个月第一天
      let mindate = moment(e[0])
        .startOf("month")
        .format("YYYY-MM-DD");
      let mindateArr = mindate.split("-");
      this.minDate = new Date(mindateArr[0], mindateArr[1] - 1, mindateArr[2]);
      // 这个月最后一天
      let maxdate = moment(e[0])
        .endOf("month")
        .format("YYYY-MM-DD");
      let maxdateArr = maxdate.split("-");
      this.maxDate = new Date(maxdateArr[0], maxdateArr[1] - 1, maxdateArr[2]);
    },
    //点击确认,格式化日期格式
    dateConfirm(date) {
      this.showDatePick = false;
      let date1 =  this.formatDate(date[0]);
      let date2 =  this.formatDate(date[1]);
      if(date1==date2){
        this.formData.taskDate = date1;
      }else{
        this.formData.taskDate =date1+"~"+date2;
      }
    },
 },
 //监听数据变化,是否关闭时间选择弹框。初始化可选日期
 watch:{
    showDatePick:{
      handler(val){
        this.minDate = new Date(2020, 0, 1);
        this.maxDate = new Date(2099, 0, 31);
      }
    }
相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue