TGJ Components

Appearance

DatePicker 日期范围选择 ​

提供月份维度的日期范围选择功能，支持跨年选择、未来日期禁用以及起止点自动交换。

引入 ​

组件位置 ​

/pages/component/datePicker/index

在 app.json 或 index.json 中引入组件：

json
"usingComponents": {
  "datePicker": "/pages/component/datePicker/index"
}

代码演示 ​

基础用法 ​

可以通过 start 和 end 属性传入初始日期对象，并通过 bind:data 监听选择结果。

html
<datePicker 
  start="{{ start }}" 
  end="{{ end }}"
  bind:data="onDateChange"
>
</datePicker>
javascript
Page({
  data: {
    // 初始展示 2025年1月 到 2025年4月
    start: { year: 2025, month: 1 },
    end: { year: 2025, month: 4 }
  },
  onDateChange(e) {
    const { start, end } = e.detail.value;
    console.log('选择范围：', `${start.year}-${start.month}`, '至', `${end.year}-${end.month}`);
    this.setData({ start, end });
  }
})

API ​

Props ​

参数说明类型默认值
start起始日期对象，包含 year 和 monthObject{ month: 0, year: 0 }
end结束日期对象，包含 year 和 monthObject{ month: 0, year: 0 }

Events ​

事件名说明回调参数
data当选择范围发生变化时触发{ value: { start, end } }

样式说明 ​

组件内部使用了复杂的 CSS 连线逻辑：

  • 颜色：默认使用主题绿（#209A56），选中背景使用其浅色透明度版本。
  • 状态类：
    • .cell.active: 单选态（仅选中开始且未选结束）。
    • .cell.begin: 范围起点的左半圆样式。
    • .cell.end: 范围终点的右半圆样式。
    • .cell.include: 范围中间月份的矩形背景。
  • 自适应：在演示页面中建议通过 transform: scale(0.9) 适应手机端布局。