react-hash-calendar，移动端日期时间选择插件

最新推荐文章于 2024-05-28 10:05:18 发布
最新推荐文章于 2024-05-28 10:05:18 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： js react 文章标签： react calendar mobile date datetime
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t6546545/article/details/110150559
版权
react-hash-calendar是一款支持手势滑动操作的移动端日期时间选择插件，提供周和月两种模式，允许用户通过滑动切换日期。提供vue同款及DEMO预览，可在浏览器手机模式查看。GitHub地址：https://github.com/TangSY/react-hash-calendar，如需帮助，可通过邮件t@tsy6.com或GitHub提交issue。
摘要由CSDN通过智能技术生成

按照惯例，先上效果图

calendar.gif
dot.gif
week.gif

vue 版本同款日历：https://github.com/TangSY/vue-hash-calendar

react-hash-calendar

  • 支持手势滑动操作
  • 上下滑动 切换 周/月 模式

    【周模式中】 左右滑动可切换 上一周/下一周
    【月模式中】 左右滑动可切换 上一月/下一月

安装使用说明

npm i react-hash-calendar

Demo

demo_qrcode.png

或者请用浏览器的手机模式查看：https://www.hxkj.vip/demo/react-calendar/

  • 🎉 觉得好用可以给一个 star 哦~~ 🎉

github 地址：https://github.com/TangSY/react-hash-calendar

API

属性 说明 类型
最低0.47元/天 解锁文章
前端小开发仔
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react月份选择控件_「react-mobile-datepicker」一个移动端的react日期选择器组件
weixin_39800918的博客
12-19 2489
react-mobile-datepicker一个轻量级的react移动端日期选择器，不依赖于moment.js,只有不到4k大小。react-mobile-datepicker可以通过上下滑动来设置年、月、日。ps: demo在模拟的移动端可上下滑动触发touch事件。这里先把它分享给大家，欢迎 star ，欢迎试用！开始使用使用 npm:$ npm install react-mobile-d...
react-reactdatetime一个轻量级但是完整的日期时间选择器react组件
08-15
react-datetime - 一个轻量级但是完整的日期时间选择器react组件
react手写移动端日历实现选择时间范围
九段刀客的博客
05-20 3033
<!DOCTYPE html> <html lang="> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewpor
探索React的优雅日期选择器：React DatePicker2
最新发布
gitblog_00019的博客
05-28 354
探索React的优雅日期选择器：React DatePicker2 项目地址:https://gitcode.com/mberneti/react-datepicker2 在前端开发中，处理日期和时间输入是一个常见的需求，为此React社区提供了一系列高质量的组件库。今天，我们来聚焦一个特别出众的开源项目——React DatePicker2，这是一个简洁且可复用的日期选择器组件，具有对波斯日历（...
React移动端h5日历组件react-h5-calendar周日历 月日历 周视图 月视图自定义标记点
刻痕
02-15 4539
React移动端h5日历组件能用的插件不多，不想自己手写，只能使用插件了。react-h5-calendar还不错，长的不丑，切换也流畅。 文档： github简易介绍：https://github.com/kokiy/react-h5-calendar 另外补充：react-hash-calendar插件文档 github详细地址：https://github.com/TangSY/react-hash-calendar DEMO：（实际不抖） 查看： 或 浏览器打开：https://kokiy.gi
「react-mobile-datepicker」一个移动端的react日期选择器组件
weixin_34235135的博客
09-12 2544
react-mobile-datepicker 一个轻量级的react移动端日期选择器，不依赖于moment.js, 只有不到4k大小。 react-mobile-datepicker可以通过上下滑动来设置年、月、日。 Github Demo ps: demo在模拟的移动端可上下滑动触发touch事件。这里先把它分享给大家，欢迎 st...
react-board:React H5 移动端项目模板
05-26
从零搭建 React 开发 H5 模板项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add react react-domyarn add webpack webpack-cli webpack-dev-server webpack-mergebabel-core babel-...
react-用React仿哔哩哔哩移动端
08-14
在本项目中，我们以"React-用React仿哔哩哔哩移动端"为主题，将深入探讨如何使用React.js框架来构建一个类似哔哩哔哩移动应用的前端界面。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适用于构建...
react-h5-calendar:react 移动端日历插件。上下滑动切换周月模式。支持两种模式：1，月模式，左右滑动切换月份。2、周模式，左右滑动切换周. h5 日历组件, 支持日期标记
05-07
react-h5-calendar 简体中文 | 造一个小轮子,核心文件不到三百行,一款基于 react 的移动端 , mobile, h5 日历展示组件 我这个只是精简版的日历 ,大而全的可参考 demo 扫描二维码直接查看 demo 直接打开浏览器查看 ...
从 react-native-calendar 扩展的简单日期范围选择器
06-08
react-native-date-range-picker 使用 react-native-calendars 实现的简单日期范围选择器。 入门 安装 react-native-calendars。 将 DateRangePicker.js 复制到您的项目中。 用法 import React, { Component } from ...
react-components：React组件移动端UI组件库
02-05
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将...
react-calendar:一个简单的 React 日历组件
07-08
React日历 一个简单的 React 日历组件 npm install -g grunt如果你还没有 Grunt。 npm install安装本地依赖 grunt来编译 Javascript。
react-calendar:日历组件
05-26
日历 默认 < Calendar xss=removed xss=removed> setSelectDate ( date ) } onSelectDates = { dates => setSelectDates ( dates ) } selectDate = { selectDate } selectDates = { selectDates } beforeDisablePoint = { beforeDisablePoint } afterDisablePoint = { afterDisablePoint } disableDates = { disableDates } / > 钥匙 类型 描述 默认 onSelectDate （[日期，数字]）=> {} 选择单元格时的选定日期 （）=> {} onSelectDates （[日期
mobile-calendar, 移动端日历插件，不依赖其他第三方框架.zip
09-18
mobile-calendar, 移动端日历插件，不依赖其他第三方框架
一个移动端react的日期选择器
08-10
一个移动端 react 的日期选择器, 让移动端飞快
react-date-range：用于选择日期和日期范围的React组件
02-20
React日期范围 与日期库无关的React组件，用于选择日期和日期范围。 使用进行日期操作。 为什么要使用react-date-range ？ 无状态日期操作 高度可配置 多范围选择 基于本地js日期 拖动n放置选择 键盘友好 现场演示： : 入门 安装 npm install --save react-date-range 该插件期望react和date-fns fns作为peerDependencies，这意味着您需要将它们安装在项目文件夹中。 npm install --save react date-fns 用法 您需要首先导入骨架和主题样式。 import 'react-date-range/dist/styles.css' ; // main style file import 'react-date-range/dist/theme/default.css' ; /
react RangePicker 日期选择器，可选择的日期范围是选中日期的前后三个月
棠樾的博客
04-22 1404
需求：在日期的选择范围中，当选择开始日期时，结束日期只能是开始日期的前后3个月的范围内。 需要用到rangePicker的onCalendarChange回调函数。 同时把已经选择的开始日期 (firstDateMoment)存放在state中，以便在disabledDate()回调函数中使用 注意：当时间选择器有默认时间的时候，firstDateMoment默认值就是页面初始化的默认时...
react-calendar:用React编写的简单灵活的事件日历
03-12
React日历 针对React的100％测试覆盖率，响应速度和灵活的事件日历。 背景知识：在使用react-big-calendar多年之后，我决定创建自己的易于使用，易于定制的方法，并使用现代的React（不推荐使用的方法）。 npm install @zach.codes/react-calendar date-fns 基本用法 import { MonthlyBody , MonthlyCalendar , MonthlyNav , DefaultMonthlyEventItem , } from '@zach.codes/react-calendar' ; export const MyMonthlyCalendar = ( ) => { let [ currentMonth , setCurrentMonth ] = useState < Date> (
react学习(12)-moment插件设置日期格式
歌谣的博客
07-14 228
<p> {moment(boothDetails.startTime).format('YYYY-MM-DD')}到 {moment(boothDetails.endTime).format('YYYY-MM-DD')} </p>
react-saga和react-thunk
06-28
React-saga和React-thunk都是用于处理异步操作的中间件。 React-thunk是Redux官方推荐的中间件之一，它允许我们在Redux中编写异步操作，使得我们可以在Redux中处理异步操作，而不需要在组件中处理异步操作。Thunk是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值