微信小程序 - 自定义封装 date-picker | 日期选择组件

最新推荐文章于 2024-04-19 16:51:36 发布

蓝玉小轩

最新推荐文章于 2024-04-19 16:51:36 发布

阅读量609

点赞数 9

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/lanyu_er/article/details/137240150

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在多个平台上使用日期选择组件，提供了Gitee上的代码地址，并详细说明了其功能、兼容性及使用方法，包括设置日期范围和事件处理等。

摘要由CSDN通过智能技术生成

date-picker | 日期选择组件

功能：日期选择组件
gitee代码地址

兼容Android｜IOS｜Windows｜Mac

使用

.json

{
  "usingComponents": {
    "date-picker": "/component/date-picker/date-picker",
  }
}

.wxml

<!-- 点击打开日期组件弹窗 -->
<view bindtap="open">{{renderTime || '选择日期'}}</view>
<!-- 日期时间选择弹窗 -->
<date-picker bind:onCancel="onCancel" bind:onConfirm="onConfirm" visible="{{isShowPicker}}" mode="{{mode}}" date="{{date}}" startDate="{{startDate}}" endDate="{{endDate}}" minScale="{{minScale}}"></date-picker>

.js

const dateUtils = require('../../../utils/dateutils');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isShowPicker: false,
    mode: 'YMD',
    date: new Date().getTime(),
    startDate: `2023/01/01`,
    endDate: `2025/12/31`,
    minScale: 10, // 时间选择器分钟刻度
    renderTime: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},
  open() {
    const date = this.data.date;
    this.setData({
      isShowPicker: true,
      date: date ? new Date(date).getTime() : new Date().getTime(),
    })
  },
  onCancel(e) {
    this.setData({
      isShowPicker: false
    })
  },
  onConfirm(e) {
    let mode = this.data.mode;
    let date = e.detail.date;
    let renderTime = dateUtils.formatLongTime(date, dateUtils.modeMapToFields[mode]);
    console.log(time);
    this.setData({
      date,
      renderTime,
      isShowPicker: false,
    })
  },
})

properties:

prop	说明	类型
date	选中日期时间戳	String｜Number
mode	日期格式	‘YMDhms’ \| ‘YMDhm’ \| ‘YMD’ \| ‘MD’ \| ‘hm’
visible	弹窗的显隐	Boolean
minScale	分钟显示精度	Number
startDate	开始日期限制	String（仅支持年月日，以/分隔的格式，如：2024/01/01）
endDate	结束日期限制	String（仅支持年月日，以/分隔的格式，如：2024/12/31）