Calendar

日历组件数据层逻辑独立出来，使用 utils 方式集成进来，为跨平台提供便利。

Install

  1. npm install beeshell

Usage

  1. import { Calendar } from 'beeshell';

Examples

image

Code

  1. import { Calendar } from 'beeshell';
  3. class App extends React.Component {
  4.   render() {
  6.       return (
  7.           <View style={{flex: 1, backgroundColor: '#ebebea'}}>
  8.               <Text>{this.state.date}</Text>
  9.               <View style={{marginVertical: 50}} >
  10.                   <Calendar
  11.                       date={this.state.date}
  12.                       startDate={'2018-04-11'}
  13.                       endDate={'2018-06-22'}
  14.                       onChange={(date) => {
  15.                           this.setState({
  16.                               date
  17.                           });
  18.                       }}>
  19.                   </Calendar>
  20.               </View>
  21.           </View>
  22.       );
  23.   }
  24. }

Props

Name Type Required Default Description
date String false 当天 日期值
startDate String false null 可以选择的最小日期
endDate String false null 可以选择的最大日期
onChange Function false null 日期修改的回调
renderItem Function false null 每个日期的渲染方式
renderHeader Function false null 渲染组件header部分
renderWeekDay Function false null 星期日-星期一的渲染

自定义渲染方法

props 入参 需要的返回值
renderItem 1. 待渲染的日期
Object {dateModel: moment 实例, formattedDate: 'YYYY-MM-DD'格式的时间字符串}
2. date 当前日历时间, moment 对象		 React Element
renderHeader 1. date 当前日历时间, moment 对象
2. changeDate(type, method), 用于修改日历时间, type: 'day', 'month', 'year', method: add 或者 subtract		 React Element
renderWeekDay weekday: ‘日’, ‘一’…’六’ React Element

自定义渲染例子

  1. import { Calendar } from 'beeshell';
  3. class App extends React.Component {
  4.   renderItem = (item, date) => {
  5.     return (
  6.         <Text>
  7.           { item.dateModel.format('DD') }
  8.       </Text>
  9.     )
  10.   }
  11.   renderHeader = (date, changeDate) {
  12.     return (
  13.       <View>
  14.         <Button onPress={() => changeDate('month', 'subtract')}>
  15.           -
  16.         </Button>
  17.           <Text>
  18.           { date.format('YYYY年MM月DD日') }
  19.         </Text>
  20.         <Button onPress={() => changeDate('month', 'add')}>
  21.           +
  22.         </Button>
  23.       </View>
  24.     )
  25.   }
  26.     renderWeekDay = (weekday) => ( <Text>周{weekday}</Text>     )
  28.   render() {
  29.       return (
  30.           <View style={{flex: 1, backgroundColor: '#ebebea'}}>
  31.               <Text>{this.state.date}</Text>
  32.               <View style={{marginVertical: 50}} >
  33.                   <Calendar
  34.                       date={this.state.date}
  35.                       startDate={'2018-04-11'}
  36.                       endDate={'2018-06-22'}
  37.                       onChange={(date) => {
  38.                           this.setState({
  39.                               date
  40.                           });
  41.                       }}
  42.                         renderItem={this.renderItem}
  43.                         renderHeader={this.renderHeader}
  44.                         renderWeekDay={this.renderWeekDay}
  45.                     >
  46.                   </Calendar>
  47.               </View>
  48.           </View>
  49.       );
  50.   }
  51. }