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)}
);
}