Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate

这篇具有很好参考价值的文章主要介绍了Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

日历控件  

      1.默认日历时间范围是当前时间到往后的6个月,可通过 min-date 和 max-date 自定义日历的范围。
      2.设置 type 为 range 后可以选择日期区间,confirm 事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。
      3.可设置allow-same-day 允许选择同一天。
      4.日期确定后触发confirm事件;得到日期数据。文章来源地址https://www.toymoban.com/news/detail-554938.html

<template>
  <div>
    <div>
      <van-cell-group border>
        <van-cell
          is-link
          title="选择单个日期"
          :value="date"
          @click="show = true"
          center
        />
      </van-cell-group>
    
      <van-calendar
        v-model="show"
        type="range"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        :allow-same-day="true"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      show: false,
      minDate: new Date(), //日期可选最小值
      maxDate: new Date(), //日期可选最大值
    };
  },
  created() {
    let nowDat = new Date();
    let dateY = nowDat.getFullYear();
    let dateM = nowDat.getMonth();
    let dateD = nowDat.getDate();
    // 设置日期可选最小值minDate、最大值maxDate
    this.minDate = new Date();
    //日历可选范围为一年,dateY + 1
    this.maxDate = new Date(dateY + 1, dateM, dateD);
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      // 日期确定后触发confirm事件;得到日期数据
      // 2022/12/1 - 2022/12/2
      // 2022/11/23 - 2022/11/23
      console.log(this.date);
    },
  },
};
</script>

<style>
</style>

到了这里,关于Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • StringBuilder类- StringBuffer类- 正则表达式- Date类 (日期)- SimpleDateFormat类(日期格式化的类)- Calendar类 (日历类)

    目录 stringbuilder类 StringBuffer类 正则表达式 日期 日期格式化的类 Calendar类:(日历类) 是一个抽象类 stringbuilder类 概念:可以改变的字符串 (这里跟string可以区分开,string创建的是不可改变的字符串) 底层:使用的是一个byte类型的数组,默认长度16 (string的底层使用final修

    2024年01月17日
    浏览(47)
  • Vue中的日历组件 Calendar 实现 考勤打卡记录

    实现效果图 1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。

    2024年01月22日
    浏览(59)
  • python自定义日历库,与对应calendar库函数功能基本一致

    目录 自定义日历库 常用列表 日期列表 常用函数 闰年判断 月份天数 元旦序号 日历表头 星期序号 序号及天数 月历字串 打印月历 年历字串 打印年历 对比测试 测试结果 完整代码 运行结果 自定义日历库函数,并使得其与python calendar库中对应的函数功能基本一致。 month_name

    2024年03月20日
    浏览(53)
  • 【Flutter】Flutter 使用 table_calendar 实现自定义日历

    【Flutter】Flutter 使用 table_calendar 实现自定义日历 你好!今天我要为你介绍一个非常实用的 Flutter 日历组件—— table_calendar 。这个组件不仅功能强大、高度可定制,而且使用起来非常简单。在本文中,我会手把手教你如何使用这个组件,并分享一些实际业务中的应用示例。希

    2024年02月08日
    浏览(46)
  • 关于uniapp中的日历组件uni-calendar中的小红点

    如果你使用过uni-calendar组件,可能你觉得这个小红点有点碍眼,但是官方给定的日历组件uni-calendar中如果你想要在某一天上添加一些信息例如:价格,签到,打卡之类,只要标记上就必定会带上小红点,那么我如何有想保留这些信息又把小红点去掉呢? 可以修改一下日历组件

    2024年02月15日
    浏览(67)
  • uni-calendar日历组件更改标点颜色和位置及多个标点显示

    uni-calendar的日历组件显示的标点只能显示一种颜色,并且标点的位置在右上角.而我们在项目中需要实现多种颜色标点的显示,并且标点要显示在日期的正下方. 改之后的效果图: 实现以上的效果我们需要对uni-calendar组件的源码进行修改就可以了,想让这个日历组件实现不同颜色的

    2024年02月12日
    浏览(51)
  • 小程序基于vant calendar 修改成横向切换月份,点击左右两侧改变月份,并在需要的日期上加上标注

              小程序基于vant calendar 修改成横向切换月份,点击左右两侧改变月份,并在需要的日期上加上标注。效果图如上,只是简单的完成         主要的思路就是,将vant的日历控件设置成平铺,然后将minDate和maxDate分别设置成当前月的第一天和最后一天。这样日历区域

    2024年02月11日
    浏览(36)
  • element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了 el-badge 具体效果如下图所示:  页面标签: 变量声明: 样式修改: 参考地址

    2024年02月11日
    浏览(69)
  • uni-app日历组件(calendar),兼容安卓、ios、微信、百度、抖音小程序

    插件链接: https://ext.dcloud.net.cn/plugin?id=7839/ 参数 说明 类型 可选值 默认值 pointList 日期数组,控制日期底下的点 Array - [] pointColor 点的颜色 String - #fff defaultDate 默认选中的日期 String - 默认值为当天 (传YYYY-MM-DD 或者 YYYY/MM/DD格式日期) showBtn 是否显示 展开/折叠 按钮 Boolean true /

    2024年02月09日
    浏览(67)
  • 小程序日期(日历)时间 选择器组件

    封装一个小程序日期(日历)时间 选择器组件 简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 基于 vant-weapp 的 van-popup 组件实现的 date-time-picker-plus 弹窗层是 基于 小程序 自带的 page-container 组件来实现的 * 注意:date-time-picker 需要下载 v

    2024年02月01日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包