calendar-date-picker-react-native

#

Note: Make sure you have install react-native-calendars, moment instructions till step, before proceeding.

Installation

using yarn:

yarn add calendar-date-picker-react-native

using npm:

npm install calendar-date-picker-react-native

Usage

Without Modal

import DatePicker from 'calendar-date-picker-react-native';

function App() {
  return <DatePicker type={'view'} onChnage={e => console.log(e)} />;
}

With Modal

import {DatePicker} from 'calendar-date-picker-react-native';

function App() {
  const [picker, setPicker] = useState(false);

  const [date, setdate] = useState('');
  const [dates, setdates] = useState([]);

  const showPicker = () => {
    setPicker(true);
  };
  const hidePicker = () => {
    setPicker(false);
  };

  return (
    <View>
      <Text>{date}</Text>
      <DatePicker
        mode="single"
        visible={picker}
        onConfirm={showPicker}
        onCancel={hidePicker}
        type="modal"
        onChnage={e => setdates(e)}
        current={'2023-03-01'}
        minDate={'2022-03-01'}
        maxDate={'2025-03-01'}
        showSixWeeks={true}
        showLeftArrow={false}
        showRightArrow={false}
        style={{
          leftArrow: {tintColor: 'black'},
          title: {backgroundColor: 'red'},
        }}
        hideArrows={false}
        showTitle={true}
      />
      {dates.map((item, index) => {
        return <Text key={index}>{item}</Text>;
      })}
      <DatePicker mode="rangePicker" type="view" onChnage={e => setdate(e)} />
    </View>
  );
}

Props

Basic

Styling

theme

Authors

• Muhammad Jahanzaib - Initial code - @jahanzaib5244

See also the list of contributors who participated in this project.

Contributing

We welcome contributions to calendar-date-picker-react-native.

If you have an idea for a new feature or have discovered a bug, please open an issue.

Don't forget to add a title and a description explaining the issue you're trying to solve and your proposed solution.

Screenshots and Gifs are VERY helpful to add to the PR for reviews.

Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

Questions

Feel free to Contact me or Create an issue