diff --git a/README.md b/README.md index bf5bf0f..37b5b7a 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Here is a quick example of how it works, with custom appearance: ## Installation -`npm install --save react-native-calendar-datepicker` +`npm install --save react-native-calendar-datepicker && react-native link react-native-vector-icons` __Minimum react-native: "^0.33.0"__ @@ -50,7 +50,8 @@ import Moment from 'moment'; | *startStage* | "day"/"month"/"year" | **[Default: "day"]** Whether you would like to select the day, month or year first. | *finalStage* | "day"/"month"/"year" | **[Default: "day"]** The last level of selection you want. | *slideThreshold* | number | **[Default: min([width / 3, 250])]** The number of pixels after which the slide event will be triggered. -| *showArrows* | boolean | **[Default: false]** Whether you would like to show arrow buttons for moving between months. +| *showArrows* | boolean | **[Default: true]** Whether you would like to show arrow buttons for moving between months. +| *yearSelectorType* | "slider" or "dropdown" | **[Default: "slider"]** Whether you would like to use a slider or dropdown for selectin the year in your calendar ### Locale specific calendar @@ -109,9 +110,10 @@ Below is the list of properties that can be used for styling. For a concrete exa Main Developer: [Vlad-Doru Ion](http://github.com/vlad-doru) -Pull requests by: +Pull requests by: * [Jason Gaare](http://github.com/jasongaare) -* [Igor Kurr](http://github.com/igorrKurr) +* [Igor Kurr](http://github.com/igorrKurr) +* [Hossein Ahmadian-Yazdi](http://github.com/hahmadia) ## License diff --git a/demo/index.ios.js b/demo/index.ios.js index b7103ed..6f5c87b 100644 --- a/demo/index.ios.js +++ b/demo/index.ios.js @@ -49,6 +49,7 @@ class demo extends Component { //finalStage="month" minDate={Moment().startOf('day')} maxDate={Moment().add(10, 'years').startOf('day')} + yearSelectorType={'dropdown'} //General Styling} style={{ borderWidth: 1, diff --git a/demo/package.json b/demo/package.json index 82f90de..33a0ee8 100644 --- a/demo/package.json +++ b/demo/package.json @@ -8,6 +8,6 @@ "dependencies": { "react": "^15.4.2", "react-native": "^0.41.2", - "react-native-calendar-datepicker": "^1.2.2" + "react-native-calendar-datepicker": "git://github.com/EdevMosaic/react-native-calendar-datepicker.git#year-selector-dropdown" } } diff --git a/package.json b/package.json index 457eaf2..c0ee458 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "dependencies": { "lodash": "^4.15.0", "moment": "^2.14.1", - "prop-types": "^15.6.0" + "prop-types": "^15.6.0", + "react-native-vector-icons": "^4.4.2" }, "description": "Cross platform calendar datepicker library for React Native.", "main": "index.js", diff --git a/src/container/Calendar.react.js b/src/container/Calendar.react.js index e40270a..32d826a 100644 --- a/src/container/Calendar.react.js +++ b/src/container/Calendar.react.js @@ -73,6 +73,7 @@ type Props = { yearMaxTintColor?: string, yearSlider?: Slider.propTypes.style, yearText?: Text.propTypes.style, + yearSelectorType?: string, }; type State = { stage: Stage, @@ -240,6 +241,7 @@ export default class Calendar extends Component { maximumTrackTintColor={this.props.yearMaxTintColor} yearSlider={this.props.yearSlider} yearText={this.props.yearText} + yearSelectorType={this.props.yearSelectorType} /> : null } @@ -254,6 +256,7 @@ Calendar.defaultProps = { startStage: DAY_SELECTOR, finalStage: DAY_SELECTOR, showArrows: true, + yearSelectorType: 'slider', }; const styles = StyleSheet.create({ diff --git a/src/pure/DaySelector.react.js b/src/pure/DaySelector.react.js index e9fcf1d..1d447a4 100644 --- a/src/pure/DaySelector.react.js +++ b/src/pure/DaySelector.react.js @@ -13,6 +13,7 @@ import { View, Text, StyleSheet, + Platform } from 'react-native'; import ViewPropTypes from '../util/ViewPropTypes'; @@ -62,7 +63,7 @@ export default class DaySelector extends Component { _slide = (dx : number) => { this.refs.wrapper.setNativeProps({ style: { - left: dx, + left: Platform.OS === 'ios' ? dx : 0, } }) }; diff --git a/src/pure/YearSelector.react.js b/src/pure/YearSelector.react.js index 2a63a7d..b170db4 100644 --- a/src/pure/YearSelector.react.js +++ b/src/pure/YearSelector.react.js @@ -10,12 +10,14 @@ import { View, Text, StyleSheet, + Picker, } from 'react-native'; import ViewPropTypes from '../util/ViewPropTypes'; // Component specific libraries. import _ from 'lodash'; import Moment from 'moment'; +import Icon from 'react-native-vector-icons/dist/FontAwesome'; type Props = { style?: ViewPropTypes.style, @@ -30,6 +32,7 @@ type Props = { maximumTrackTintColor?: string, yearSlider?: Slider.propTypes.style, yearText?: Text.propTypes.style, + yearSelectorType?: string, }; type State = { year: Number, @@ -53,27 +56,56 @@ export default class YearSelector extends Component { this.props.onFocus && this.props.onFocus(date); } + renderSliderOrDropdown(values) { + if (this.props.yearSelectorType === 'dropdown') { + return( + + this.setState({year})} + > + {values} + + this._onFocus(this.state.year)}/> + + ); + } + + return( + + this.setState({year})} + onSlidingComplete={(year) => this._onFocus(year)} + style={[this.props.yearSlider]} + /> + + {this.state.year} + + + ); + } + render() { + const values = Array(this.props.maxDate.year() - this.props.minDate.year() + 1).fill().map((_,i) => ( + + )); return ( - this.setState({year})} - onSlidingComplete={(year) => this._onFocus(year)} - style={[this.props.yearSlider]} - /> - - {this.state.year} - + {this.renderSliderOrDropdown(values)} ); }