Crafty-app

Made by Crafty-app

Official npm site DateTimePicker-react-Native official site

Date picker

A light date/time picker for react-native

Installation

npm:

  npm i @khaledz370/datetimepicker-react-native

yarn:

  yarn add @khaledz370/datetimepicker-react-native

what's new

  Pressing outside the date/time picker area will dismiss it.

Usage

List of possible values:

mode:

  Defines the type of the picker

  List of possible values
  "date" default
  "time"

isTransparent:

   Hide/show what is behind the date picker while datePicker is opened

   List of possible values
   true
   false default

hrs12:

   Allows changing of the time picker to a 12 hour format

   List of possible values
   true default
   false

date:

    Defines the date or time value used in the component.

onCancel:

  required!
  triggerd when on cancel is pressed

onConfirm:

   required!
   returns date value when pressed

startDate:

  Defines the minimum date that can be selected

endDate:

  Defines the maximum date that can be selected

step:

  The interval at which minutes can be selected

txtColor

  Change the color of text
  Default "black"

bgColor

  Change the back-ground color of datePicker
  Default "white"

btnColor

  Change the color of datePicker buttons including "Confirm" and "Cancel" buttons
  Default "black"

selectDayColor

  Set the color of the highlighted day in the calender
  default "skyblue"

Usage/Examples

DatePicker

import DatePicker from "@khaledz370/datetimepicker-react-native";

export default function App() {
  const [date, setdate] = useState(null); // you can also use new Date()
  const [showModal, setShowModal] = useState(false);
  const confirm = value => {
    setdate(value);
    setShowModal(false);
  };

  return (
    <View style={styles.container}>
      {showModal && (
        <DatePicker
          startDate={new Date("6/20/2020")}
          date={date}
          mode="date"
          onCancel={() => setShowModal(false)}
          onConfirm={e => {
            confirm(e);
          }}
        />
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "skyblue",
    alignItems: "center",
    justifyContent: "space-around"
  }
});

Screenshots

TimePicker

import DatePicker from "@khaledz370/datetimepicker-react-native";

export default function App() {
  const [time, setTime] = useState(null); // you can also use new Date()
  const [showModal, setShowModal] = useState(false);
  const confirm = value => {
    setTime(value);
    setShowModal(false);
  };

  return (
    <View style={styles.container}>
      {showModal && (
        <DatePicker
          date={time}
          mode="time"
          step={5}
          onCancel={() => setShowModal(false)}
          onConfirm={e => {
            confirm(e);
          }}
        />
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "skyblue",
    alignItems: "center",
    justifyContent: "space-around"
  }
});

DatePicker style example

          <DatePicker
            ...
            txtColor="white"
            btnColor="lightgreen"
            bgColor="grey"
            selectDayColor="green"
          />

Important For web view

Add this to app.json
  "web": {
      "build": {
        "babel": {
          "include": [
            "@khaledz370/datetimepicker-react-native"
          ]
        }
      }
    }