小程序自定义日历组件，可设置区间选择范围-Toy模板网

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

文档: https://treadpit.github.io/wx_calendar/v2/guide.html#%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

1. 将 calendar 文件夹拷贝至自己的组件目录，页面 json 文件中配置组件，组件路径根据项目实际情况填写

{
  "usingComponents": {
    "calendar": "/component/calendar/index"
  }
}

2. 在页面 wxml 中引入组件

<calendar />

此时运行小程序，可以看到日历组件已经渲染出来了，可以做一些简单的操作

文章来源地址https://www.toymoban.com/news/detail-514512.html

data: {
    // 此处为日历自定义配置字段
    calendarConfig: {
      multi: true, // 是否开启多选,
      weekMode: true, // 周视图模式
      theme: 'elegant', // 日历主题，目前共两款可选择，默认 default 及 elegant，自定义主题色在参考 /theme 文件夹
      showLunar: true, // 是否显示农历，此配置会导致 setTodoLabels 中 showLabelAlways 配置失效
      inverse: true, // 单选模式下是否支持取消选中,
      markToday: '今', // 当天日期展示不使用默认数字，用特殊文字标记
      hideHeader: true, // 隐藏日历头部操作栏
      takeoverTap: true, // 是否完全接管日期点击事件（日期不会选中)
      emphasisWeek: true, // 是否高亮显示周末日期
      chooseAreaMode: true, // 开启日期范围选择模式，该模式下只可选择时间段
      showHolidays: true, // 显示法定节假日班/休情况，需引入holidays插件
      showFestival: true, // 显示节日信息（如教师节等），需引入holidays插件
      highlightToday: true, // 是否高亮显示当天，区别于选中样式（初始化时当天高亮并不代表已选中当天）
      defaultDate: '2018-3-6', // 默认选中指定某天，如需选中需配置 autoChoosedWhenJump: true
      preventSwipe: true, // 是否禁用日历滑动切换月份
      firstDayOfWeek: 'Mon', // 每周第一天为周一还是周日，默认按周日开始
      onlyShowCurrentMonth: true, // 日历面板是否只显示本月日期
      autoChoosedWhenJump: true, // 设置默认日期及跳转到指定日期后是否需要自动选中
      disableMode: {
        // 禁用某一天之前/之后的所有日期
        type: 'after', // [‘before’, 'after']
        date: '2020-3-24' // 无该属性或该属性值为假，则默认为当天
      },
      ... // 更多配置待接入
    }
  }

到了这里，关于小程序自定义日历组件，可设置区间选择范围的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！