微信小程序可滑动月日历组件使用详解

下面是关于“微信小程序可滑动月日历组件使用详解”的完整攻略：

一、安装

安装这个可滑动月日历组件很简单，只需要使用npm进行安装即可：

npm i calendar-month

二、引用组件

在需要使用月日历组件的页面中，引用月日历组件的wxml文件路径，并在js文件中绑定对应的组件属性即可：

<!-- 日历组件 -->
<calendar-month id="calendar"
  selected-date="{{selectedDate}}"
  bind:calendarChange="calendarChange"
  range-before="{{rangeBefore}}"
  range-after="{{rangeAfter}}"
></calendar-month>

Page({
  data: {
    selectedDate: '',
    rangeBefore: '',
    rangeAfter: ''
  },

  onLoad: function () {
    // 设置日历范围
    const now = new Date()
    const rangeBefore = `${now.getFullYear()}-${now.getMonth() + 1}-01`
    const rangeAfter = `${now.getFullYear()}-${now.getMonth() + 2}-01`
    this.setData({
      rangeBefore,
      rangeAfter
    })
  },

  // 日历变化时触发
  calendarChange: function (e) {
    this.setData({
      selectedDate: e.detail.date
    })
  }
})

三、配置组件属性

月日历组件支持以下属性配置：

元素	类型	默认值	说明
id	String	无	组件的唯一标识符
selected-date	String	今天的日期，格式为"YYYY-MM-DD"	设置选中的日期
show-today	Boolean	true	是否显示"今天"按钮
show-header	Boolean	true	是否显示顶部栏
show-prev-month	Boolean	true	是否显示上一月按钮
show-next-month	Boolean	true	是否显示下一月按钮
range-before	String	无	日期选择范围的开始日期，格式为"YYYY-MM-DD"
range-after	String	无	日期选择范围的结束日期，格式为"YYYY-MM-DD"
show-date-label	Boolean	true	是否显示日期标签
show-lunar	Boolean	true	是否显示农历
bind:calendarChange	EventHandle	无	日历变化时的事件

四、使用示例

示例一：获取选中日期

<!-- 日历组件 -->
<calendar-month id="calendar"
  selected-date="{{selectedDate}}"
  bind:calendarChange="calendarChange"
></calendar-month>

<!-- 显示选中日期 -->
<view>已选日期：{{selectedDate}}</view>

Page({
  data: {
    selectedDate: ''
  },

  // 日历变化时触发
  calendarChange: function (e) {
    this.setData({
      selectedDate: e.detail.date
    })
  }
})

示例二：设置日期范围

<!-- 日历组件 -->
<calendar-month id="calendar"
  selected-date="{{selectedDate}}"
  bind:calendarChange="calendarChange"
  range-before="{{rangeBefore}}"
  range-after="{{rangeAfter}}"
></calendar-month>

Page({
  data: {
    selectedDate: '',
    rangeBefore: '',
    rangeAfter: ''
  },

  onLoad: function () {
    // 设置日历范围
    const now = new Date()
    const rangeBefore = `${now.getFullYear()}-${now.getMonth() + 1}-01`
    const rangeAfter = `${now.getFullYear()}-${now.getMonth() + 2}-01`
    this.setData({
      rangeBefore,
      rangeAfter
    })
  },

  // 日历变化时触发
  calendarChange: function (e) {
    this.setData({
      selectedDate: e.detail.date
    })
  }
})

希望这份攻略对你有所帮助！