/Javascript/React/React native time range picker

React native time range picker

React-native date time picker

expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

Source: codegrepper.com

React native time range picker

npm install react-native-paper-dates --save

Source: reactnativeexample.com

Similar codes

4 votes214 views2 answers
Hide status bar react native
Javascript React
0 vote189 views1 answer
Sort by attribute in reactjs
Javascript React
1 vote188 views1 answer
Difference between dom and react dom
Javascript React
2 votes199 views2 answers
Splice state react
Javascript React
47 votes196 views3 answers
How to comment in the react javascript
Javascript React
15 votes177 views2 answers
React native location
Javascript React
14 votes202 views2 answers
React router link with params
Javascript React
0 vote200 views1 answer
How to clear form fields in react after submit
Javascript React
1 vote193 views1 answer
React js console log not working
Javascript React
1 vote196 views2 answers
Toast in react native
Javascript React