React Native Week Month Date Picker

Overview

React Native Week Month Date Picker

Date picker with a week and month view

Demo

Installation

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

Dependencies

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

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

follow react-native-reanimated, react-native-gesture-handler, and react-native-safe-area-context installation guide to install native dependencies properly.

Usage

Timeslots {selectedDate.toString()} ); }">
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 (
    <SafeAreaView style={{ flex: 1}}>
      <DatePicker
        minDate={minDate}
        maxDate={addDays(minDate, 120)}
        markedDates={[minDate, addDays(new Date(), 2)]}
        selectedDate={selectedDate}
        onDateChange={(date) => setSelectedDate(date)}
        disabledDates={[addDays(new Date(), 1), addDays(new Date(), 3)]}
        allowsPastDates={false}
        locale="en"
        theme={{
          primaryColor: 'purple',
        }}
      >
        <View>
          <Text>Timeslots</Text>
          <Text>{selectedDate.toString()}</Text>
        </View>
      </DatePicker>
    </SafeAreaView>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Comments
  • Question, where would a

    Question, where would a "done" button go?

    where would a "done" button go? Like, after I’m done selecting my date, I’m sure there’s a way to dismiss the Picker. Where would the button to do that, go? Is there a way to show or position such a button?

    Thanks!

    opened by Seanmclem 3
  • Change Selected Day Color

    Change Selected Day Color

    Hi, How can change the selected day color? Currently I can change only the primaryColor in theme. Can you also update this as well? Thank you for your work and effort! Cheers!

    opened by cbaser 1
  • Disable the hideMonthView

    Disable the hideMonthView

    Hi !

    Is there a way to add the possibility to disable the hideMonthView function when we are into the month View ? When I click on a date, i don't want to reopen the month view.

    Thanks for your time !

    opened by mc6ril 1
  • Update README to indicate necessary peerDependencies

    Update README to indicate necessary peerDependencies

    • react-native-gesture-handler
    • react-native-reanimated
    • react-native-safe-area-context
    • plugins: ['react-native-reanimated/plugin'], to babel.config.js
    • Add import 'react-native-gesture-handler'; at top of index.ts

    https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

    opened by gunnartorfis 0
  • Locale not updating

    Locale not updating

    Hello, It looks like locale is forced to 'en', specifying locale="fr" doesn't change anything. Is it possible to change this feature ?

    Thanks for all the work !

    good first issue 
    opened by Yeloda 0
Releases(v0.3.0)
Owner
Noona
A simple appointment manager for busy professionals
Noona
A date picker web component, and spiritual successor to duet date picker

<date-picker> A date picker web component, based on duet date picker, except authored with Lit and using shadow DOM. This is a work in progress. Todo:

Nick Williams 25 Aug 3, 2022
Reusable date picker component for React

React DayPicker DayPicker is a reusable date picker component for React. $ npm install react-day-picker@next Beta version ⚠️ This branch is for the ne

Giampaolo Bellavite 4.8k Dec 28, 2022
CalendarPickerJS - A minimalistic and modern date-picker component/library 🗓️👨🏽‍💻 Written in Vanilla JS

CalendarPickerJS The simple and pretty way to let a user select a day! Supports all major browser. Entirely written in Vanilla JavaScript with no depe

Mathias Picker 15 Dec 6, 2022
Nepali Date Picker jQuery Plugin 🇳🇵

Nepali Date Picker Nepali Date Picker jQuery Plugin for everyone. ???? Installation npm install nepali-date-picker Demo and Documentation https://leap

Leapfrog Technology 70 Sep 29, 2022
A tiny and fast zero-dependency date-picker built with vanilla Javascript and CSS.

A tiny zero-dependency and framework-agnostic date picker that is incredibly easy to use! Compatible with any web UI framework, vanilla JS projects, and even HTML-only projects!

Nezar 1 Jan 22, 2021
Create Persian Calendar as html helper with tag builder c# , and convert selected persian date to gregorian date

Persian-Calendar Use JS,Html,CSS,C# White theme for Persian Calendar , easy to use. Create Persian Calendar as html helper. Use Tag builder in c# for

Tareq Awwad 4 Feb 28, 2022
A repository with the purpose of Node.js streams study. Powered by JS Expert Week / @ErickWendel

Spotify Radio - Semana JS Expert 6.0 Seja bem vindo(a) à sexta Semana Javascript Expert. Este é o código inicial para iniciar nossa jornada. Marque es

Osman Rodrigues 9 Oct 28, 2022
An wide ranged emoji picker extension for firefox based browsers.

Fire-Picker A wide ranged emoji picker extension for firefox based browsers made with pure js. This is still in a prototype phase. Changes will be mad

null 2 Jan 10, 2022
An wide ranged emoji picker extension for firefox based browsers.

Fire-Picker A wide ranged emoji picker extension for firefox based browsers made with pure js. This is still in a prototype phase. Changes will be mad

Furha Lepton 2 Jan 10, 2022
⏰ Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API

English | 简体中文 | 日本語 | Português Brasileiro | 한국어 | Español (España) | Русский Fast 2kB alternative to Moment.js with the same modern API Day.js is a

null 41.7k Dec 28, 2022
⏳ Modern JavaScript date utility library ⌛️

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. ?? Documentation

date-fns 30.6k Dec 29, 2022
🕑 js-joda is an immutable date and time library for JavaScript.

js-joda is an immutable date and time library for JavaScript. It provides a simple, domain-driven and clean API based on the ISO8601 calendar.

null 1.5k Dec 27, 2022
DEPRECATED: Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.

TimezoneJS.Date A timezone-enabled, drop-in replacement for the stock JavaScript Date. The timezoneJS.Date object is API-compatible with JS Date, with

Matthew Eernisse 830 Nov 20, 2022
Date() for humans

date Date is an english language date parser for node.js and the browser. For examples and demos, see: http://matthewmueller.github.io/date/ Update: d

Matthew Mueller 1.5k Jan 4, 2023
:clock8: :hourglass: timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement.

timeago.js timeago.js is a nano library(less than 2 kb) used to format datetime with *** time ago statement. eg: '3 hours ago'. i18n supported. Time a

hustcc 4.9k Jan 4, 2023
Lightweight and simple JS date formatting and parsing

fecha Lightweight date formatting and parsing (~2KB). Meant to replace parsing and formatting functionality of moment.js. NPM npm install fecha --save

Taylor Hakes 2k Jan 5, 2023
A lightweight, locale aware formatter for strings containing unicode date tokens.

Date Token Format A lightweight (~2kB), locale aware formatter for strings containing unicode date tokens. Usage Install the package using: yarn add d

Donovan Hutchinson 1 Dec 24, 2021
⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

English | 简体中文 | 日本語 | Português Brasileiro | 한국어 | Español (España) | Русский Fast 2kB alternative to Moment.js with the same modern API Day.js is a

null 41.7k Dec 28, 2022
Easy to get a date.

date2data 테이블에 날짜별 데이터 넣을 때마다 새로 객체 만들어서 작업하기가 매우 귀찮아서 만들었다. moment.js를 쓰기에는 구현하고자 하는 내용이 너무 가벼웠음 Install npm i date2data Usage import {getMonthlyDate

Duho Kim 3 Apr 12, 2022