79 lines
3.2 KiB
JavaScript
Executable File
79 lines
3.2 KiB
JavaScript
Executable File
import React, { Component } from 'react'
|
|
import { StyleSheet, View ,Text} from 'react-native'
|
|
import { Calendar, defaultStyle } from 'react-native-calendars'
|
|
|
|
const XDate = require('xdate');
|
|
|
|
type Props = {
|
|
initialRange: React.PropTypes.array.isRequired,
|
|
onSuccess: React.PropTypes.func.isRequired,
|
|
};
|
|
export default class DateRangePicker extends Component<Props> {
|
|
|
|
state = {isFromDatePicked: false, isToDatePicked: false, markedDates: {}}
|
|
|
|
componentDidMount() { this.setupInitialRange() }
|
|
|
|
onDayPress = (day) => {
|
|
if (!this.state.isFromDatePicked || (this.state.isFromDatePicked && this.state.isToDatePicked)) {
|
|
this.setupStartMarker(day)
|
|
} else if (!this.state.isToDatePicked) {
|
|
let markedDates = {...this.state.markedDates}
|
|
let [mMarkedDates, range] = this.setupMarkedDates(this.state.fromDate, day.dateString, markedDates)
|
|
if (range >= 0) {
|
|
this.setState({isFromDatePicked: true, isToDatePicked: true, markedDates: mMarkedDates})
|
|
this.props.onSuccess(this.state.fromDate, day.dateString)
|
|
} else {
|
|
this.setupStartMarker(day)
|
|
}
|
|
}
|
|
}
|
|
|
|
setupStartMarker = (day) => {
|
|
let markedDates = {[day.dateString]: {startingDay: true, color: this.props.theme.markColor, textColor: this.props.theme.markTextColor}}
|
|
this.setState({isFromDatePicked: true, isToDatePicked: false, fromDate: day.dateString, markedDates: markedDates})
|
|
}
|
|
|
|
setupMarkedDates = (fromDate, toDate, markedDates) => {
|
|
let mFromDate = new XDate(fromDate)
|
|
let mToDate = new XDate(toDate)
|
|
let range = mFromDate.diffDays(mToDate)
|
|
if (range >= 0) {
|
|
if (range == 0) {
|
|
markedDates = {[toDate]: {color: this.props.theme.markColor, textColor: this.props.theme.markTextColor}}
|
|
} else {
|
|
for (var i = 1; i <= range; i++) {
|
|
let tempDate = mFromDate.addDays(1).toString('yyyy-MM-dd')
|
|
if (i < range) {
|
|
markedDates[tempDate] = {color: this.props.theme.markColor, textColor: this.props.theme.markTextColor}
|
|
} else {
|
|
markedDates[tempDate] = {endingDay: true, color: this.props.theme.markColor, textColor: this.props.theme.markTextColor}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return [markedDates, range]
|
|
}
|
|
|
|
setupInitialRange = () => {
|
|
if (!this.props.initialRange) return
|
|
let [fromDate, toDate] = this.props.initialRange
|
|
let markedDates = {[fromDate]: {startingDay: true, color: this.props.theme.markColor, textColor: this.props.theme.markTextColor}}
|
|
let [mMarkedDates, range] = this.setupMarkedDates(fromDate, toDate, markedDates)
|
|
this.setState({markedDates: mMarkedDates, fromDate: fromDate})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Calendar {...this.props}
|
|
markingType={'period'}
|
|
current={this.state.fromDate}
|
|
markedDates={this.state.markedDates}
|
|
onDayPress={(day) => {this.onDayPress(day)}}/>
|
|
)
|
|
}
|
|
}
|
|
|
|
DateRangePicker.defaultProps = {
|
|
theme: { markColor: '#00adf5', markTextColor: '#ffffff' }
|
|
}; |