React Hash Calendar 使用教程

最新推荐文章于 2024-09-14 09:37:17 发布

卓丹游Kingsley

最新推荐文章于 2024-09-14 09:37:17 发布

阅读量825

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00963/article/details/142239568

React Hash Calendar 使用教程

react-hash-calendar 移动端日期、时间选择插件，日期选择面板以日历形式展示。上下滑动切换周/月模式。支持两种模式：1，月模式，左右滑动切换月份。2、周模式，左右滑动切换周。项目地址: https://gitcode.com/gh_mirrors/re/react-hash-calendar

项目介绍

React Hash Calendar 是一个支持手势滑动操作的移动端日期时间选择插件。它提供了周和月两种模式，允许用户通过滑动切换日期。该插件具有以下特点：

手势滑动操作：支持上下滑动切换周/月模式，左右滑动切换周/月。
多种模式：支持周模式和月模式。
自定义标记：可以对特定日期进行标记，支持不同颜色和标记类型。
多语言支持：支持中文和英文。

项目快速启动

安装

首先，使用 npm 安装 react-hash-calendar：

npm install react-hash-calendar

基本使用

在 React 项目中引入并使用 ReactHashCalendar 组件：

import React from 'react';
import { ReactHashCalendar } from 'react-hash-calendar';

function App() {
  return (
    <div className="App">
      <ReactHashCalendar model="inline" />
    </div>
  );
}

export default App;

配置选项

ReactHashCalendar 组件提供了多种配置选项，以下是一些常用的配置：

<ReactHashCalendar
  visible={true} // 控制日历的显示与隐藏
  onVisibleChange={(visible) => console.log(visible)} // 显示状态变化时的回调
  scrollChangeDate={true} // 滑动时是否修改选中的日期
  model="inline" // 日历组件的显示模式，inline 或 dialog
  defaultDatetime={new Date()} // 默认日期时间
  format="YY/MM/DD hh:mm" // 日期格式
  weekStart="Sunday" // 每周的起始日
  pickerType="datetime" // 选择器类型，datetime, date, time
  showTodayButton={true} // 是否显示“今天”按钮
  isShowWeekView={false} // 是否显示周视图
  isShowAction={true} // 是否显示操作栏
  disabledWeekView={false} // 是否禁用周视图
  disabledDate={(date) => date < new Date()} // 禁用日期
  disabledScroll={false} // 禁用滑动方向
  markDate={['2023/10/01', '2023/10/02']} // 需要标记的日期
  markType="dot" // 标记类型，dot, circle, dot+circle
  minuteStep={1} // 分钟步长
  lang="CN" // 语言，CN 或 EN
  dateClickCallback={(date) => console.log(date)} // 日期点击回调
  dateConfirmCallback={(date) => console.log(date)} // 日期确认回调
/>