React+Taro选择日期组件封装

话不多说,直接上效果

1.页面渲染时间模块

bash 复制代码
{this.renderCalendarPopup()}

2.引入时间组件弹层,state中加入showPopup(控制什么时候展示时间选择弹层),time(选择后的时间值)

bash 复制代码
private renderCalendarPopup = () => {
    const { showPopup, time } = this.state;
    return (
        <CalendarModal
            onConfirm={this.onCalendarPopupConfirm}
            selectedDate={time}
            visible={showPopup}
            onClose={this.closePopup}
        />
    );
};

3.分别引入时间弹层的CalendarModal控制组件,以及里面具体时间组件,请下载该链接里的两个包,放到项目中
具体代码在这个链接包里

相关推荐
RFCEO9 分钟前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
烬头882133 分钟前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu1213833 分钟前
Vuex介绍
前端·javascript·vue.js
We་ct34 分钟前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
qq_177767371 小时前
React Native鸿蒙跨平台通过Animated.Value.interpolate实现滚动距离到动画属性的映射
javascript·react native·react.js·harmonyos
晚霞的不甘1 小时前
Flutter for OpenHarmony从零到一:构建《冰火人》双人合作闯关游戏
android·flutter·游戏·前端框架·全文检索·交互
2601_949480061 小时前
【无标题】
开发语言·前端·javascript
css趣多多1 小时前
Vue过滤器
前端·javascript·vue.js
理人综艺好会2 小时前
Web学习之用户认证
前端·学习
●VON2 小时前
React Native for OpenHarmony:项目目录结构与跨平台构建流程详解
javascript·学习·react native·react.js·架构·跨平台·von