微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间

首先,在项目的 components 目录下创建一个新的文件夹,例如 date-picker,并在其中创建以下文件:

  • date-picker.wxml
  • date-picker.wxss
  • date-picker.js
  • date-picker.json

2.date-picker.wxml

html 复制代码
<view class="date-picker">
  <t-cell
    title="{{title}}"
    hover
    note="{{dateText || '请选择'}}"
    arrow
    bindtap="showPicker"
    t-class="panel-item"
  />
  
  <t-date-time-picker
    auto-close
    title="选择日期"
    visible="{{visible}}"
    mode="date"
    default-value="{{date}}"
    format="YYYY-MM-DD"
    start="{{start}}"
    end="{{end}}"
    filter="{{filter}}"
    popup-props="{{popupProps}}"
    bindchange="onConfirm"
    bindpick="onColumnChange"
    bindcancel="hidePicker"
    bindclose="handleClose"
  />
</view>

date-picker.js

TypeScript 复制代码
Component({
  properties: {
    title: { type: String, value: '请选择日期' }, // 标题
    date: { type: String, value: '' }, // 默认为空,将在 attached 中设置
    start: { type: String, value: '' },
  },

  data: {
    visible: false, // 选择器是否可见
    dateText: '',    // 显示的日期文本
    // 指定选择区间起始值
    end: '2030-09-09 12:12:12',
    filter(type, options) {
      if (type === 'year') {
        return options.sort((a, b) => b.value - a.value);
      }
      return options;
    },
    popupProps: {
      usingCustomNavbar: true,
    },
  },
  observers: {
    'date': function (newVal) {
      this.setData({ dateText: newVal || '' });
    },
    'start': function(newVal) {
      if (newVal && this.data.end && newVal > this.data.end) {
        this.setData({ end: newVal });
      }
    },
    'end': function(newVal) {
      if (newVal && this.data.start && newVal < this.data.start) {
        wx.showToast({
          title: '结束日期必须大于或等于开始日期',
          icon: 'none'
        });
        this.setData({ end: '' });
      }
    }
  },

  methods: {
    // 显示选择器
    showPicker() {
      this.setData({ visible: true });
    },

    // 隐藏选择器
    hidePicker() {
      this.setData({ visible: false });
    },

    // 确认选择
    onConfirm(e) {
      const selectedDate = e.detail.value;
      if (this.data.title === '结束日期' && this.data.start && selectedDate < this.data.start) {
        wx.showToast({
          title: '结束日期必须大于或等于开始日期',
          icon: 'none'
        });
        return;
      }
      this.setData({
        date: selectedDate,
        visible: false
      });
      this.triggerEvent('datechange', selectedDate); // 触发事件传递选择的日期
    },

    // 列变化(可选)
    onColumnChange(e) {
      // 处理列变化逻辑(可选)
    },

    // 关闭处理(可选)
    handleClose() {
      this.hidePicker();
    }
  }
});

date-picker.json

TypeScript 复制代码
{
  "component": true,
  "usingComponents": {
    "t-cell": "tdesign-miniprogram/cell/cell",
    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
  }
}

使用组件

在需要使用日期选择器的页面中,引入并使用该组件。

开始时间为今天时间,结束时间大于等于开始时间。

TypeScript 复制代码
{
  "usingComponents": {
    "date-picker":"/components/date-picker/date-picker",
  }
}
html 复制代码
 <view class="title">
          <date-picker title="开始日期" start="{{today}}" date="{{startDate}}" bind:datechange="onStartDateChange" />
        </view>
        <view class="title">
          <date-picker title="结束日期" start="{{startDate}}" date="{{endDate}}" bind:datechange="onEndDateChange" />
        </view>
javascript 复制代码
data:{
    //日期选择
    startDate: '',
    endDate: '',
    today: '', // 在 onLoad 中设置
}

 onLoad(options) {
    this.setTodayDate();
  },


 //日期选择
  setTodayDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;
    this.setData({ today: formattedDate, startDate: formattedDate });
  },
  onStartDateChange(e) {
    this.setData({ startDate: e.detail });
  },

  onEndDateChange(e) {
    this.setData({ endDate: e.detail });
  },
  
相关推荐
2501_915909063 小时前
网络调试工具推荐 Fiddler抓包工具使用教程与代理设置详解(HTTP/HTTPS配置与实战技巧)
网络·http·ios·小程序·fiddler·uni-app·webview
老师可可5 小时前
成绩发布工具使用方法,附成绩分析教程
学习·信息可视化·小程序·excel·学习方法
sen_shan7 小时前
《微信小程序》第八章:“我的“设计
微信小程序·小程序
咸虾米11 小时前
在unicloud的云对象中如何调用同一服务空间内的另外其他云对象
javascript·微信小程序·前端框架
weixin_1772972206912 小时前
盲盒小程序系统开发:助力品牌拓展新市场
小程序·盲盒
一 乐12 小时前
口腔健康系统|口腔医疗|基于java和小程序的口腔健康系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·小程序·毕设
Aress"12 小时前
uniapp 生成二维码图片[APP+H5+小程序等 全端适配]
小程序·uni-app
小小王app小程序开发12 小时前
旧衣回收小程序的技术架构与商业落地:开发者视角的全链路解析
小程序·架构
sen_shan13 小时前
《微信小程序》第七章:TabBar设计
微信小程序·小程序
程序00713 小时前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序