import {
SafeAreaView,
ScrollView,
StyleSheet,
View,
Text,
StatusBar,
Button,
Platform,
TextInput,
useColorScheme,
Switch,
Alert,
FlatList,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import SegmentedControl from './SegmentedControl';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import React, {useRef, useState} from 'react';
import {Picker} from 'react-native-windows';
import moment from 'moment-timezone';
import {
ANDROID_MODE,
DAY_OF_WEEK,
IOS_MODE,
ANDROID_DISPLAY,
IOS_DISPLAY,
} from '../src/constants';
import * as RNLocalize from 'react-native-localize';
const timezone = [
120,
0,
-120,
undefined,
'America/New_York',
'America/Vancouver',
'Europe/London',
'Europe/Istanbul',
'Asia/Hong_Kong',
'Australia/Brisbane',
'Australia/Sydney',
'Australia/Adelaide',
];
const ThemedText = (props) => {
const isDarkMode = useColorScheme() === 'dark';
const textColorByMode = {color: isDarkMode ? Colors.white : Colors.black};
const TextElement = React.createElement(Text, props);
return React.cloneElement(TextElement, {
style: [props.style, textColorByMode],
});
};
const ThemedTextInput = (props) => {
const isDarkMode = useColorScheme() === 'dark';
const textColorByMode = {color: isDarkMode ? Colors.white : Colors.black};
const TextElement = React.createElement(TextInput, props);
return React.cloneElement(TextElement, {
style: [props.style, styles.textInput, textColorByMode],
placeholderTextColor: isDarkMode ? Colors.white : Colors.black,
});
};
const Info = ({testID, title, body}) => {
return (
{title}
{body}
);
};
const MODE_VALUES = Platform.select({
ios: Object.values(IOS_MODE),
android: Object.values(ANDROID_MODE),
windows: [],
});
const DISPLAY_VALUES = Platform.select({
ios: Object.values(IOS_DISPLAY),
android: Object.values(ANDROID_DISPLAY),
windows: [],
});
const MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];
export const App = () => {
// Sat, 13 Nov 2021 10:00:00 GMT (local: Saturday, November 13, 2021 11:00:00 AM GMT+01:00)
const sourceMoment = moment.unix(1636765200);
const sourceDate = sourceMoment.local().toDate();
const [date, setDate] = useState(sourceDate);
const [tzOffsetInMinutes, setTzOffsetInMinutes] = useState(undefined);
const [tzName, setTzName] = useState(RNLocalize.getTimeZone());
const [mode, setMode] = useState(MODE_VALUES[0]);
const [show, setShow] = useState(false);
const [textColor, setTextColor] = useState();
const [accentColor, setAccentColor] = useState();
const [display, setDisplay] = useState(DISPLAY_VALUES[0]);
const [interval, setMinInterval] = useState(1);
const [neutralButtonLabel, setNeutralButtonLabel] = useState(undefined);
const [disabled, setDisabled] = useState(false);
const [minimumDate, setMinimumDate] = useState();
const [maximumDate, setMaximumDate] = useState();
// Windows-specific
const [time, setTime] = useState(undefined);
const [maxDate] = useState(new Date('2021'));
const [minDate] = useState(new Date('2018'));
const [is24Hours, set24Hours] = useState(false);
const [firstDayOfWeek, setFirstDayOfWeek] = useState(DAY_OF_WEEK.Monday);
const [dateFormat, setDateFormat] = useState('longdate');
const [dayOfWeekFormat, setDayOfWeekFormat] = useState(
'{dayofweek.abbreviated(2)}',
);
const scrollRef = useRef(null);
const handleResetPress = () => {
setDate(undefined);
};
const onChange = (event, selectedDate) => {
if (Platform.OS === 'android') {
setShow(false);
}
if (event.type === 'dismissed') {
Alert.alert(
'picker was dismissed',
undefined,
[
{
text: 'great',
},
],
{cancelable: true},
);
return;
}
if (event.type === 'neutralButtonPressed') {
setDate(new Date(0));
} else {
setDate(selectedDate);
}
};
const onTimeChange = (event: any, newTime?: Date) => {
if (Platform.OS === 'windows') {
setTime(newTime);
}
};
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.dark : Colors.lighter,
};
const renderItem = ({item}) => {
const isNumber = typeof item === 'number';
const title = isNumber
? item > 0
? `+${item} mins`
: `${item} mins`
: item;
return (
);
};
const toggleMinMaxDateInUTC = () => {
setTzOffsetInMinutes(0);
setTzName(undefined);
const startOfTodayUTC = sourceMoment.utc().startOf('day').toDate();
setMinimumDate(maximumDate ? undefined : startOfTodayUTC);
const endOfTomorrowUTC = sourceMoment
.utc()
.endOf('day')
.add(1, 'day')
.toDate();
setMaximumDate(minimumDate ? undefined : endOfTomorrowUTC);
};
if (Platform.OS !== 'windows') {
return (
Example DateTime Picker
{(tzName || !isNaN(tzOffsetInMinutes)) && (
<>
{
if (tzName) {
return moment(date).tz(tzName).format();
}
if (tzOffsetInMinutes !== undefined) {
return moment(date).utcOffset(tzOffsetInMinutes).format();
}
return '';
})()}
/>
{
if (tzName) {
return 'Overridden TzName:';
}
if (tzOffsetInMinutes !== undefined) {
return 'Overridden TzOffset:';
}
return '';
})()}
body={tzName || `${tzOffsetInMinutes} mins`}
/>
>
)}
{
if (Platform.OS === 'ios') {
scrollRef.current?.scrollToEnd({animated: true});
}
}}>
mode prop:
{
setMode(MODE_VALUES[event.nativeEvent.selectedSegmentIndex]);
}}
/>
display prop:
{
setDisplay(
DISPLAY_VALUES[event.nativeEvent.selectedSegmentIndex],
);
}}
/>
minute interval prop:
{
setMinInterval(
MINUTE_INTERVALS[event.nativeEvent.selectedSegmentIndex],
);
}}
/>
text color (iOS only)
{
setTextColor(text.toLowerCase());
}}
placeholder="textColor"
/>
accent color (iOS only)
{
setAccentColor(text.toLowerCase());
}}
placeholder="accentColor"
/>
disabled (iOS only)
neutralButtonLabel (android only)
[android] show and dismiss picker after 3 secs
{
toggleMinMaxDateInUTC();
setShow(true);
}}
title="toggleMinMaxDate"
/>
{/* This label ensures there is no regression in this former bug: https://github.com/react-native-datetimepicker/datetimepicker/issues/409 */}
This is a very very very very very very long text to showcase
behavior
{show && (
)}
);
} else {
return (
<>
{global.HermesInternal !== null && (
Engine: Hermes
)}
Example DateTime Picker
Date format:
setDateFormat(value)}>
Day of week format:
setDayOfWeekFormat(value)}>
First day of week:
setFirstDayOfWeek(value)}>
{date !== undefined
? moment(date).format('MM/DD/YYYY')
: moment().format('MM/DD/YYYY')}
Clock format (AM/PM):{' '}
set24Hours(value)}>
Minute interval:
setMinInterval(value)}>
{time !== undefined ? 'Time changed event response:\n' : ''}
{time !== undefined ? time.toUTCString() : ''}
>
);
}
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
container: {
marginTop: 32,
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
containerWindows: {
marginTop: 32,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
header: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
textLabel: {
margin: 10,
flex: 1,
},
textInput: {
height: 60,
flex: 1,
},
button: {
alignItems: 'center',
marginBottom: 10,
},
resetButton: {
width: 150,
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
dateTimeText: {
fontSize: 16,
fontWeight: 'normal',
},
windowsPicker: {
flex: 1,
paddingTop: 10,
width: 350,
},
});