自已撸的一个小程序日历组件

📅 小程序日历组件

概述

这是一款简单易用的小程序日历组件，实现了选择开始时间和结束时间的功能。克隆 maxrisk/calendar 以后可在微信开发者工具中打开查看示例。

项目地址：https://github.com/maxrisk/ca...

示例

index.wxml

<calendar least-days="{{ leastDays }}" bind:calendarchange="onCalendarChange" />

index.json

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

index.js

import { formatTime } from '../../utils/util.js';

Page({

  data: {
    leastDays: 3
  },

  onCalendarChange: function (e) {
    const startDate = new Date(e.detail.days[0]);
    const endDate = e.detail.days[1] ? new Date(e.detail.days[1]) : '';

    console.log(`选中 ${formatTime(startDate)} ~ ${endDate ? formatTime(endDate) : ''}，共 ${e.detail.count} 天`);
  }
})

组件属性

参数	类型	说明	默认值
month-count	Number	显示几个月份	2
least-days	Number	至少选择多少天	0
time-arr	Array	开始时间和结束开始时间（时间戮），没选中时为 0	[0, 0]

组件事件

事件名称	说明	回调参数
calendarchange	在选择日期时触发	event