https://github.com/gunnartorfis/react-native-week-month-date-picker

Date picker with a week and month view 📅
https://github.com/gunnartorfis/react-native-week-month-date-picker

date datepicker picker react react-native

Last synced: 3 months ago
JSON representation

Date picker with a week and month view 📅

• Host: GitHub
• URL: https://github.com/gunnartorfis/react-native-week-month-date-picker
• Owner: gunnartorfis
• License: mit
• Created: 2022-03-01T22:38:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-03-06T05:30:10.000Z (over 2 years ago)
• Last Synced: 2024-07-05T02:10:36.434Z (4 months ago)
• Topics: date, datepicker, picker, react, react-native
• Language: TypeScript
• Homepage:
• Size: 398 KB
• Stars: 119
• Watchers: 4
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Week Month Date Picker

Date picker with a week and month view



## Installation

```sh

npm install react-native-week-month-date-picker

```

#### Dependencies

This library needs these dependencies to be installed as peer dependencies in your project:

```bash

npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context date-fns

```

> follow [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation), [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation), and [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started) installation guide to install native dependencies properly.

## Usage

```js

import { addDays } from 'date-fns';

import * as React from 'react';

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

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

export default function App() {

  const minDate = new Date();

  const [selectedDate, setSelectedDate] = React.useState(new Date());

  return (

    

       setSelectedDate(date)}

        disabledDates={[addDays(new Date(), 1), addDays(new Date(), 3)]}

        allowsPastDates={false}

        locale="en"

        theme={{

          primaryColor: 'purple',

        }}

      >

        

          Timeslots

          {selectedDate.toString()}

        

      

    

  );

}

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT