Dropdown option for selecting the year

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
 

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,

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"
   }
 }

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",

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({

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

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(
+        <View>
+          <Picker
+            selectedValue={`${this.state.year}`}
+            onValueChange={(year) => this.setState({year})}
+          >
+            {values}
+          </Picker>
+          <Icon.Button name="check" size={40} alignSelf="center" underlayColor="transparent" backgroundColor="transparent" borderRadius={0} color={"black"} onPress={() => this._onFocus(this.state.year)}/>
+        </View>
+      );
+    }
+
+    return(
+      <View>
+        <Slider
+            minimumValue={this.props.minDate.year()}
+            maximumValue={this.props.maxDate.year()}
+            // TODO: Add a property for this.
+            minimumTrackTintColor={this.props.minimumTrackTintColor}
+            maximumTrackTintColor={this.props.maximumTrackTintColor}
+            step={1}
+            value={this.props.focus.year()}
+            onValueChange={(year) => this.setState({year})}
+            onSlidingComplete={(year) => this._onFocus(year)}
+            style={[this.props.yearSlider]}
+        />
+        <Text style={[styles.yearText, this.props.yearText]}>
+          {this.state.year}
+        </Text>
+      </View>
+    );
+  }
+
   render() {
+    const values = Array(this.props.maxDate.year() - this.props.minDate.year() + 1).fill().map((_,i) => (
+      <Picker.Item
+        key={`${this.props.minDate.year() + i}`}
+        value={`${this.props.minDate.year() + i}`}
+        label={`${this.props.minDate.year() + i}`}
+      />
+    ));
     return (
       <View style={[{
         flexGrow: 1,
         // Wrapper view default style.
       },this.props.style]}>
-        <Slider
-          minimumValue={this.props.minDate.year()}
-          maximumValue={this.props.maxDate.year()}
-          // TODO: Add a property for this.
-          minimumTrackTintColor={this.props.minimumTrackTintColor}
-          maximumTrackTintColor={this.props.maximumTrackTintColor}
-          step={1}
-          value={this.props.focus.year()}
-          onValueChange={(year) => this.setState({year})}
-          onSlidingComplete={(year) => this._onFocus(year)}
-          style={[this.props.yearSlider]}
-          />
-        <Text style={[styles.yearText, this.props.yearText]}>
-          {this.state.year}
-        </Text>
+        {this.renderSliderOrDropdown(values)}
       </View>
     );
   }