https://github.com/werein/react-native-dates

React Native date / daterange picker and calendar
https://github.com/werein/react-native-dates

calendar datepicker daterange daterangepicker datetime-picker react react-native react-native-dates

Last synced: 5 days ago
JSON representation

React Native date / daterange picker and calendar

• Host: GitHub
• URL: https://github.com/werein/react-native-dates
• Owner: werein
• Created: 2016-10-20T08:59:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:17:13.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T19:03:07.301Z (7 months ago)
• Topics: calendar, datepicker, daterange, daterangepicker, datetime-picker, react, react-native, react-native-dates
• Language: JavaScript
• Homepage:
• Size: 1.4 MB
• Stars: 165
• Watchers: 3
• Forks: 53
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Dates

[![Build Status](https://travis-ci.org/werein/react-native-dates.svg)](https://travis-ci.org/werein/react-native-dates)[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/werein/react-native-dates?branch=master&svg=true)](https://ci.appveyor.com/project/jirikolarik/react-native-dates) [![Code Climate](https://codeclimate.com/github/werein/react-native-dates/badges/gpa.svg)](https://codeclimate.com/github/werein/react-native-dates) [![Issue Count](https://codeclimate.com/github/werein/react-native-dates/badges/issue_count.svg)](https://codeclimate.com/github/werein/react-native-dates)

__React Native Date and date range picker / calendar for iOS and Android__

## API

```javascript

type DatesType = {

  range: boolean,

  date: ?moment,

  startDate: ?moment,

  endDate: ?moment,

  focusedInput: 'startDate' | 'endDate',

  onDatesChange: (date: { date?: ?moment, startDate?: ?moment, endDate?: ?moment }) => void,

  isDateBlocked: (date: moment) => boolean

  weekHeader?: {

    dayFormat?: string

  },

  header?: {

    renderLeftLabel?: Function,

    renderCenterLabel?: moment => void,

    renderRightLabel?: Function,

  },

  hideDifferentMonthDays: boolean

}

```

## Demo





## Example

In this example we disabled dates back in history and we shows selected dates bellow

```javascript

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

import Dates from 'react-native-dates';

import moment from 'moment';

export default class ReactNativeDatesDemo extends Component {

  state = {

    date: null,

    focus: 'startDate',

    startDate: null,

    endDate: null

  }

  render() {

    const isDateBlocked = (date) =>

      date.isBefore(moment(), 'day');

    const onDatesChange = ({ startDate, endDate, focusedInput }) =>

      this.setState({ ...this.state, focus: focusedInput }, () =>

        this.setState({ ...this.state, startDate, endDate })

      );

    const onDateChange = ({ date }) =>

      this.setState({ ...this.state, date });

    return (

      

        

        

      {this.state.date && {this.state.date && this.state.date.format('LL')}}

      {this.state.startDate && this.state.startDate.format('LL')}

      {this.state.endDate && this.state.endDate.format('LL')}

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    flexGrow: 1,

    marginTop: 20

  },

  date: {

    marginTop: 50

  },

  focused: {

    color: 'blue'

  }

});

AppRegistry.registerComponent('ReactNativeDatesDemo', () => ReactNativeDatesDemo);

```