README
React Native Customize Selected Date
Install
npm install react-native-customize-selected-date --save
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
Usage:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
import DateTime from 'react-native-customize-selected-date'
import _ from 'lodash'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
time: ''
}
}
onChangeDate(date) {
alert(date)
}
renderChildDay(day) {
if (_.includes(['2018-11-15', '2018-12-10', '2018-12-20'], day)) {
return <Image source={require('./src/Images/ic_lock_green.png')} style={styles.icLockRed} />
}
if (_.includes(['2018-11-16', '2018-12-12', '2018-12-21', '2018-12-18'], day)) {
return <Image source={require('./src/Images/ic_lock_red.png')} style={styles.icLockRed} />
}
}
render() {
return (
<View style={styles.container}>
<DateTime
date={this.state.time}
changeDate={(date) => this.onChangeDate(date)}
format='YYYY-MM-DD'
renderChildDay={(day) => this.renderChildDay(day)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
icLockRed: {
width: 13 / 2,
height: 9,
position: 'absolute',
top: 2,
left: 1
}
});
Props
Property | Type | Description |
---|---|---|
date | PropTypes.string | Default date |
changeDate | PropTypes.func | function call back after select date |
format | PropTypes.array | Format date output |
renderChildDay | PropTypes.func | return child element injected to date |
customWeekdays | PropTypes.func | Array Weekdays, default: ['Sun', 'Mon', 'Tus', 'Wes', 'Thu', 'Fri', 'Sat'] |
renderPrevYearButton | PropTypes.func | Render function for customize prev year button |
renderPrevMonthButton | PropTypes.func | Render function for customize prev month button |
renderNextYearButton | PropTypes.func | Render function for customize next year button |
renderNextMonthButton | PropTypes.func | Render function for customize next year button |
Styles
Property | Type | Description |
---|---|---|
containerStyle | PropTypes.object | Container Style |
warpRowControlMonthYear | PropTypes.object | Style for row control next or prev month, year. |
warpRowWeekdays | PropTypes.object | Warp row weekdays style |
weekdayStyle | PropTypes.object | Weekday text style |
warpDayStyle | PropTypes.object | Style for each day in month |
dateSelectedWarpDayStyle | PropTypes.object | Style for selected day in month |
textDayStyle | PropTypes.object | Style for text day in month |
currentDayStyle | PropTypes.object | Style for text current day in month |
notCurrentDayOfMonthStyle | PropTypes.object | Style for text when day is not current day in month |
License
This project is licenced under the MIT License.
Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.
Pull Request
Pull requests are welcome!