React-日历组件(原生JS代码)
时间:2020-05-21
本文章向大家介绍React-日历组件(原生JS代码),主要包括React-日历组件(原生JS代码)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
使用
<CalendarMonth default={true} method={this.state.checkType} room_id={this.state.roomNoValue.length > 0 && this.state.roomNoValue[0]} setCurrent={(current) => { this.setState({ current, bookingButton:false }) const currentTime = moment().format('HH:mm') if(this.state.forbid){ this.setState({ bookingButton:false }) return } this.setState({ bookingButton:this.state.checkType ===1? moment().format('YYYY-MM-DD') === current&&this.state.lastTime > currentTime? true: ( moment(moment().format('YYYY-MM-DD')).isBefore(current)?!this.state.forbid:false): moment().format('YYYY-MM-DD') === current[0]? true:( moment(moment().format('YYYY-MM-DD')).isBefore(current[0])?true:false), lastTime:this.state.lastTime }) }} time={moment(this.state.date).format('YYYY-MM')}/>
详细代码
import React, {Component} from 'react'; import DateItem from "./DateItem"; import PropTypes from 'prop-types'; import moment from "moment"; import HttpUtils from "../../../utils/HttpUtils"; import {ActivityIndicator} from "antd-mobile"; // import console = require("console"); const days = [ '日', '一', '二', '三', '四', '五', '六']; class CalendarMonth extends Component { //method 1:按小时 2:按天 static defaultProps = { time: moment().format('YYYY-MM'), method: 2, room_id: 65, default: true } static propTypes = { //YYYY-MM-DD room_id: PropTypes.number, time: PropTypes.string, // time: PropTypes., method: PropTypes.number, default: PropTypes.bool } constructor(props) { super(props); this.state = { list: [], data: [], week: 0, current: props.default ? moment().format('YYYY-MM-DD') : '', } } getList() { this.setState({loading: true}) HttpUtils.postForm('/api/room/order/list', { room_id: this.props.room_id, start_date: moment(this.props.time).date(1).format('YYYY-MM-DD'), end_date: moment(this.props.time).date(moment().daysInMonth()).format('YYYY-MM-DD') }).then(res => { if (res.status === 10000) { this.getData(res.data); } }) } componentDidMount() { if (this.props.room_id) { this.getList(); } else { this.getData() } } componentDidUpdate(prevProps, prevState) { if (prevProps.time !== this.props.time || prevProps.room_id !== this.props.room_id) { this.getList(); } } getData = (data) => { const day = moment(this.props.time).daysInMonth(); const list = []; for (let i = 0; i < day; i++) { list.push({ title: i + 1, time: moment(this.props.time).date(i + 1).format('YYYY-MM-DD'), count: data && data.find((item) => item.date === moment(this.props.time).date(i + 1).format('YYYY-MM-DD')) ? data.find((item) => item.date === moment(this.props.time).date(i + 1).format('YYYY-MM-DD')).count : 0 }) } this.setState({ list, disabled: data ? data.map((item) => item.date) : [], week: moment(this.props.time).day(), loading: false }) } render() { const {week} = this.state; const {method} = this.props; return ( <div className={'month_card'} style={{position: 'relative'}}> {this.state.loading && <div style={{ height: '100%', width: '100%', position: 'absolute', display: 'flex', justifyContent: 'center', alignItems: 'center', top: 0, left: 0, backgroundColor: 'rgba(255,255,255,0.48)' }}> <ActivityIndicator size={'large'}/> </div> } <div style={{filter: this.state.loading ? 'blur(3px)' : ''}}> <div className='month_title'> {days.map((item, index) => ( <span key={index}>{item}</span> ))} </div> <div style={{flex: 1}}> <div className='month'> {week > 0 ? days.slice(0, week).map((item, index) => ( <span className='empty' key={'month' + index}></span> )) : null} {this.state.list.map((item, index) => ( <div className='item' onClick={() => { if (method === 1) { this.setState({ current: item.time }, () => { this.props.setCurrent && this.props.setCurrent(item.time); }) } else { if (method === 2 && item.count > 0) { return; } if (this.state.current && this.state.current[0] === this.state.current[1] && moment(item.time).isAfter(this.state.current[0])) { let start = moment(this.state.current[0]); for (let i = 0; i <= moment(item.time).diff(start, 'days'); i++) { if (this.state.disabled.indexOf(start.add(i, 'd').format('YYYY-MM-DD')) !== -1) { this.setState({ current: [item.time, item.time] }, () => { this.props.setCurrent && this.props.setCurrent(this.state.current); }) return; } } this.setState({ current: [this.state.current[0], item.time] }, () => { this.props.setCurrent && this.props.setCurrent(this.state.current); }) } else { this.setState({ current: [item.time, item.time] }, () => { this.props.setCurrent && this.props.setCurrent(this.state.current); }) } } }} > <DateItem item={item} key={'month01_' + index} disabled={ moment(this.props.time).date(index + 1).format('YYYY-MM-DD')<moment(new Date()).format('YYYY-MM-DD')?true: method === 2 ? item.count > 0 : false} current={method === 1 ? this.state.current === item.time : this.state.current.length === 2 ? moment(item.time).isBetween(moment(this.state.current[0]).subtract(1, 'd'), moment(this.state.current[1]).add(1, 'd')) : false}/> </div> ))} </div> </div> </div> </div> ) } } export default CalendarMonth;
额外文本
import React, {Component} from 'react'; export default class DateItem extends Component { constructor(props) { super(props); this.state = { category: 0 } } componentDidMount() { // this.getActivityStatus(); } componentDidShow() { } render() { const {item} = this.props; return ( <div> <div> <span className={this.props.disabled?'disabled-item':this.props.current ? 'current-item' : 'inactive-item'}>{item.title}</span> {item.count !== 0 && <span className={'book-item'}>{item.count}场</span>} </div> </div> ) } }
原文地址:https://www.cnblogs.com/it-Ren/p/12928945.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第四十四课——继承性之单继承
- python第四十五课——继承性之多重继承
- Linux系统——keepalived高可用集群服务
- python第四十五课——继承性之多继承
- HTTP服务器Nginx服务介绍续
- python第四十六课——函数重写
- Linux系统Memcached服务介绍
- python第四十七课——类属性和函数属性
- python第四十八课——类函数和对象函数
- python第四十九课——对象序列化与反序列化
- python第五十课——多态性
- python第五十一课——__slots
- Linux系统安全配置iptables服务介绍
- ThreadLocal企业中真实应用
- python第五十二课--自定义异常类