@gem-mine/rmc-calendar
v1.0.8
Published
React Mobile Calendar Component(web and react-native)
Downloads
41
Readme
rmc-calendar
React Mobile Calendar Component (web)
Screenshots
Development
npm i
npm start
Example
http://localhost:8021/examples/
online example: http://gem-mine.github.io/rmc-calendar/
install
docs
Usage
import React, { Component } from 'react';
import { RMCCalendar } from '@gem-mine/rmc-calendar';
import '@gem-mine/rmc-calendar/assets/index.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
setVisiable = () => {
this.setState({
visible: !this.state.visible,
});
}
render() {
return (
<div className="App">
<Calendar
visible={this.state.visible}
onCancel={this.setVisiable}
onOk={this.setVisiable}
/>
</div>
);
}
}
export default App;
API
Calendar props
interface PropsType {
/** 本地化 */
locale?: Models.Locale;
/** 关闭时回调 */
onCancel?: () => void;
/** 清除时回调 */
onClear?: () => void;
/** 确认时回调 */
onOk?: (startDateTime?: Date, endDateTime?: Date) => void;
/** (web only) 样式前缀,default: rmc-calendar */
prefixCls?: string;
/** 附加样式名称, default: '' */
className?: string;
style?: React.CSSProperties;
/** header title, default: {locale.title} */
title?: string;
/** 选择类型,default: range,one: 单日,range: 日期区间 */
type?: 'one' | 'range';
/** 是否显示,default: false */
visible?: boolean;
/** 选中日期, 开始时间, 结束时间 */
value?: SelectDateType;
/** 默认展示,开始时间、结束时间 */
defaultValue?: SelectDateType;
/** 是否采用滑动翻页模式 */
swiper?: boolean;
/** 是否在日期区间模式显示起/止信息 */
showBeginEndInfo?: boolean;
// CalendarPanel
/** 显示开始日期,default: today */
defaultDate?: Date;
/** 自定义内容追加到单元格内 */
renderDateCellExtra?: (date: Date) => Models.ExtraData | void;
/** 自定义内容覆盖单元格 */
renderDateFullCell?: (data: Models.CellData) => React.ReactNode | void;
/** 自定义确认框 */
renderConfirm?: (data?: Models.ConfirmParams) => Models.ConfirmPanelData;
/** 无限滚动优化(大范围选择),default: false */
infinite?: boolean;
/** 初始化月个数,default: 6 */
initalMonths?: number;
/** 可显示日期 */
validRange?: [Date | undefined, Date | undefined];
/** 不可选日期 */
disabledDate?: (current: Date) => boolean;
/** 设置月起始日(1-28),default: 1 */
firstDayOfMonth?: number;
/** 设置周起始日(0-6),default: 0 */
firstDayOfWeek?: number;
/** 选择日期回调,如果有返回值,选择范围将使用返回值 */
onSelect?: (date: Date, state?: [Date | undefined, Date | undefined]) => SelectDateType | void;
}
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rmc-calendar is released under the MIT license.