werein / react-native-dates Goto Github PK

View Code? Open in Web Editor NEW

165.0 3.0 53.0 1.44 MB

React Native date / daterange picker and calendar

JavaScript 55.63% Java 7.61% Objective-C 18.29% Ruby 10.01% Starlark 8.46%

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

react-native-dates's Introduction

React Native Dates

React Native Date and date range picker / calendar for iOS and Android

API

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

/**
 * 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 (
      <View style={styles.container}>
        <Dates
          onDatesChange={onDatesChange}
          isDateBlocked={isDateBlocked}
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          focusedInput={this.state.focus}
          focusedMonth={ moment('05/09/2030','DD/MM/YYYY')}
          range
        />

        <Dates
          date={this.state.date}
          onDatesChange={onDateChange}
          isDateBlocked={isDateBlocked}
        />

      {this.state.date && <Text style={styles.date}>{this.state.date && this.state.date.format('LL')}</Text>}
      <Text style={[styles.date, this.state.focus === 'startDate' && styles.focused]}>{this.state.startDate && this.state.startDate.format('LL')}</Text>
      <Text style={[styles.date, this.state.focus === 'endDate' && styles.focused]}>{this.state.endDate && this.state.endDate.format('LL')}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexGrow: 1,
    marginTop: 20
  },
  date: {
    marginTop: 50
  },
  focused: {
    color: 'blue'
  }
});

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

react-native-dates's People

Contributors

Stargazers

Watchers

react-native-dates's Issues

Styling

Is there no props to style this calendar? This seems to be the best calendar I could find that allows me to pick date range, but I need to be able to style it.

Changing the selected date color

First of all this is not an issue, needs some direction.
I am trying to change the selected date colour. I tried with Styles available in module index.js. But no use.
Can anyone please help me out to change the background colour of the date selected from default blue

Undefined moment2.default.range(currentDate.clone().startOf(iosweek))

@jirikolarik
Hi bro. I have problem when use library. How can I fix it?

Not displaying Weeks in calander

Using in ios, only month is beeing displayed along with prev and next button

any thoughts

Move Sunday to beginning of week.

Is there a way to move Sunday to the beginning of the week and have Saturday at the end?

Excuse me, can't set up the Chinese?

Calendar not working properly with moment.locale in pt-br, suggestion to fix.

Hi, many have saw that the Calendar doest not work with another language except English.

I have 2 offers to fix both "back and foward" phrase and the name of the days, may i have your support?

Change language of calendar

Is there a way to change the calendar language to spanish for example?

Thanks

In `range={true}` case , How to change current date screen(calendar screen)

the default screen is based on current date. If current date is 5-june-2018 then june month is shown as default.
How to change default screen say my default screen is december... is it possible to show future month as default ?

Display Weeks from Sunday to Saturday

I'm using react-native-dates in my ios app. Currently the calendar display the weeks from Monday to Sunday. I want to display the weeks from Sunday to Saturday. does the calendar support this customization?

Can't install react-native-dates by npm or yarn?

yarn add react-native-dates
npm install --save react-native-dates
Both of them failed to install and it shouldn't be network problem to me. Is there any hint? TIA!

changing proportion of day blocks on selection

Please let me know how to fix this problem

_moment2.default.range is not a function

I have such problem in my app

Highlight current date on calendar

how can I do this.

It shouldn't be possible to select a range with disabled dates inside

Hello,

I just noticed a bug where we can select a date range between 2 available dates, even if there are some disabled inside.

Showcase :

With available/disabled dates like this :

I am able to do this :

Otherwise, the lib is awesome ;)

Thanks.

Date not focused if the hour changes

Hello,

I noticed another bug :

If we change the hour of a selected date, it unfocuses it, in a scenario of selecting a date and then its time it feels weird to have the period or date removed, even though the variables are properly set.

From what I saw, the date is selected only if the time is 00:00.

If you need any help fixing one of the issues I opened let me know, maybe I can open a PR, I need this to work quite fast so it's better if I can help making it faster :).