diff --git a/example/src/examples/Advanced.js b/example/src/examples/Advanced.js
index b5dfce0..82ac18a 100644
--- a/example/src/examples/Advanced.js
+++ b/example/src/examples/Advanced.js
@@ -5,6 +5,7 @@ import DeviceInfo from 'react-native-device-info';
import DateChange from '../propPickers/DateChange';
import FadeToColor from '../propPickers/FadeToColor';
import LocalePicker from '../propPickers/LocalePicker';
+import MinMaxDateChange from '../propPickers/MinMaxDateChange';
import ModePicker from '../propPickers/ModePicker';
import TextColor from '../propPickers/TextColor';
import PropSlider from '../PropSlider';
@@ -14,6 +15,10 @@ Date.prototype.addHours = function (h) {
return this;
}
+export const defaultMinDate = new Date().addHours(-24 * 5);
+export const defaultMaxDate = new Date().addHours(24 * 5);
+
+export const readableDate = date => date ? date.toISOString().substr(0, 19).replace('T', ' ') : 'undefined'
export default class Advanced extends Component {
@@ -24,6 +29,8 @@ export default class Advanced extends Component {
selectedProp: 'mode',
locale: DeviceInfo.getDeviceLocale(),
mode: 'datetime',
+ minDate: defaultMinDate,
+ maxDate: defaultMaxDate,
}
render() {
@@ -34,13 +41,13 @@ export default class Advanced extends Component {
onDateChange={this.setDate}
locale={this.state.locale}
minuteInterval={1}
- minimumDate={new Date()}
- maximumDate={(new Date()).addHours(24 * 5 * 1000)}
+ minimumDate={this.state.minDate}
+ maximumDate={this.state.maxDate}
fadeToColor={this.props.backgroundColor}
textColor={this.state.textColor}
mode={this.state.mode}
/>
- Picker date: {this.state.chosenDate.toISOString()}
+ Picker date: {readableDate(this.state.chosenDate)}
Change prop:
@@ -69,8 +76,17 @@ export default class Advanced extends Component {
this.setState({ chosenDate })} />
},
{ name: 'minuteInterval' },
- { name: 'minDate' },
- { name: 'maxDate' },
+ {
+ name: 'minDate', component:
+ this.setState({ minDate })}
+ defaultDate={defaultMinDate}
+ />
+ },
+ {
+ name: 'maxDate', component:
+ this.setState({ maxDate })}
+ defaultDate={defaultMaxDate} />
+ },
{
name: 'fadeToColor', component:
this.props.setBackground(randomColor())} />
diff --git a/example/src/propPickers/MinMaxDateChange.js b/example/src/propPickers/MinMaxDateChange.js
new file mode 100644
index 0000000..099ccbb
--- /dev/null
+++ b/example/src/propPickers/MinMaxDateChange.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { Text, Button, View, StyleSheet } from 'react-native';
+import { readableDate } from '../examples/Advanced'
+
+export default class extends Component {
+
+ render() {
+ const { onChange, defaultDate } = this.props;
+ return (
+
+ {readableDate(this.props.value)}
+
+ {this.renderButton('-1 hour', -1)}
+ {this.renderButton('+1 hour', 1)}
+
+
+ {this.renderButton('-1 day', -24)}
+ {this.renderButton('+1 day', 24)}
+
+
+
+
+
+
+ )
+ }
+
+ renderButton = (title, hourDiff) =>
+
+}
+
+
+const PropButton = ({ title, value, onChange }) =>