72ecec0 actually removed node6 support

yarn upgrade v0.27.5
[1/4] Resolving packages...
warning react-native-calendar-picker > react-native > xcode > [email protected]: Use uuid module instead
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=7.6.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/upgrade for documentation about this command.

1. react-native 0.26.3 is used
2. Click any day in calendar and check what date is passed to onDateChange callback: it is always the date which was selected before tap.

Looks like is already fixed in fork jak4@ffb5b71

So, @jak4, let's PR that work maybe?

Hi,

is there the intention to implement a feature that allows to basically select a from and end date? E.g. by swiping from one date to the other?

Would gladly support this implementation.

Regards
Philipp

@stephy ,
Thank you very much for the awesome plugin.
But when applying startFromMonday={true}, the weekdays do not update accordingly. It stills the same as before so the date and weekdays does not match.

Can you please fix this soon?
Thanks.

I want do pull request with posibility of mark multiple dates. I try to clone your repository and do:

$ git checkout -b mark_multiple_dates_implemented
$ git checkout mark_multiple_dates_implemented
$ git push -u origin mark_multiple_dates_implemented

But:

remote: Permission to stephy/CalendarPicker.git denied to luisfuertes.
fatal: unable to access 'https://github.com/stephy/CalendarPicker.git/': The requested URL returned error: 403

Can you tell me how can i do please?

Hi,
do you have plans to CalendarPicker in android?

obrigado,
joão

@stephy
I installed react-native-calendar-picker using npm.
But it has any errors.

安装卸载都报错

componentWillReceiveProps detects changes to initialDate, however there is a bug that doesn't update the month/year state. I will create a PR to fix this.

v5 of CalendarPicker is causing the error:

Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: String.prototype.es6
Paths: ...myrepo/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/String.prototype.es6.js collides with ...myrepo/node_modules/react-native-calendar-picker/node_modules/react-native/packager/src/Resolver/polyfills/String.prototype.es6.js

This error is caused by a @providesModule declaration with the same name across two different files.

It looks like this was re-introduced after the refactor (see #24).

  "dependencies": {
    "expo": "^15.1.0",
    "react": "~15.4.0",
    "react-native": "0.42.3"
  }

To continue to support running examples from within the CalendarPicker repo, move react & react-native to devDependencies:

  "devDependencies": {
    "expo": "^15.1.0"
    "react": "~15.4.0",
    "react-native": "0.42.3",
    ...
  },
  ...
  "dependencies": {
  }

Created PR #56 if that looks acceptable.

In our own app I've observed that Dimensions returns incorrect values when the app resumes some of the time, and when the screen is rotated all the time. Instead of calculating width/height off of Dimensions, the View's onLayout callback should be used since it's more reliable.
I'll create a PR to address this.

It would be nice to be able to customize the calendar in such a way that you can specify whether its "Sun, Mon, Tue, Wed, etc." or "Mon, Tue, Wed, ...". In other countries, its more common to have the calendar start with "Monday" at the very left.

Thanks
Philipp

It may just be me, but it seems that this component is extremely slow. There is a significant and noticeable delay between clicking a date and having it register on screen. There's a minor lag using the iOS emulator, but it is extremely noticeable to the point of being a hindrance on a real device (6S+).

I was just wondering if this was an issue people were aware of or others were experiencing or if I was alone in this.

Is there a way to select a date range across months? For example June 31 - July 1. This could be a complex UI challenge since both months need to be shown.

Could you update the npm package to reflect the latest pull request?

Installing the library via:
$ npm install react-native-calendar-picker --save
installs a duplication of React and React-Native in node-modules, which causes the app to crash.

Removing ./react-native-calendar-picker/node-modules/React and ./react-native-calendar-picker/node-modules/React-Native folders seemed to have solved the problem manually.

Wanted to know if there was a way to pre-populate selected dates?

As soon as CalendarPicker depends on react and react-native:

    "react": "^0.14.8",
    "react-native": "^0.25.1"

That means that it cant be used with react 15 because it installs own copy of react and uses it. It leads to bad error (similar to facebook/react-native#7384):

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: TouchHistoryMath
  Paths: /Users/skladchikov/Documents/work/youtrack-mobile/node_modules/react-native-calendar-picker/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with /Users/skladchikov/Documents/work/youtrack-mobile/node_modules/react/lib/TouchHistoryMath.js

This error is caused by a @providesModule declaration with the same name accross two different files.
Error: @providesModule naming collision:
  Duplicate module name: TouchHistoryMath
  Paths: /Users/skladchikov/Documents/work/youtrack-mobile/node_modules/react-native-calendar-picker/node_modules/react-native/Libraries/vendor/react/browser/eventPlugins/TouchHistoryMath.js collides with /Users/skladchikov/Documents/work/youtrack-mobile/node_modules/react/lib/TouchHistoryMath.js

This error is caused by a @providesModule declaration with the same name accross two different files.
    at HasteMap._updateHasteMap (/Users/skladchikov/Documents/work/youtrack-mobile/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:160:15)
    at /Users/skladchikov/Documents/work/youtrack-mobile/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:125:25

This library shouldn't be in dependencies.

Deprecations

Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1

Instead of:

import React, { Component, View } from 'react-native';
you should now:

import React, { Component } from 'react';
import { View } from 'react-native';

see the following link https://github.com/facebook/react-native/releases/tag/v0.25.1

The calendar extends outside container when used inside React Modal component. Setting screenWidth doesn't change anything.

CalendarPicker opens to the current date by default. Is there a way to get it to open to another date? The use case is a date field that is pre-filled to an arbitrary date in the future, and opening the calendar picker should center to that date. With CalendarPicker's current behavior of opening to the current date, the user has to potentially click through many months to get back to the pre-filled date.

It is hard to select a date or click on the arrows when using the calendar on the real device.

i run : npm install --save react-native-calendar-picker then react-native run-android, it says error like this

Excuse me, is there a week mode 。 7 days

Hi, there seems to be a bug, where the dates of a specific day of the month (eg. Wed) disappears as I swipe to other months. And the column in which the days disappear also changes as I swipe to different months. Im using Samsung S5.

Hi @stephy ,
Can we mark a certain date with a certain color?
For example: I'm having a meeting on 31 Dec 2016, this date should have red color.

If this feature is not available now, please add this feature in next release, I think it's easy for you as you marked the selected date with color already.
Thanks.

Hi there,

I am working with this really cool library and I am having trouble with styling the header part.
For instance, I would like to apply a rounded corner on the two title and I don't know if it is possible yet.

Thx,
Thomas.

Paths: .../project/node_modules/react-native-calendar-picker/node_modules/react-native/local-cli/core/fixtures/files/package.json collides with .../project/node_modules/react-native/local-cli/core/fixtures/files/package.json

The idea is to add disabledDates prop with list of date in array format which will become unable to choose from the picker.

I've created a PR #66 for this.

Example code

const disabledDates = [new Date('10 May, 2017'), new Date('12 May, 2017'), new Date('15 May, 2017')];

<CalendarPicker
...
disabledDates={disabledDates}
...
/>

Screenshots

The default behavior of highlighting today can be confusing. It makes it appear as though the current day is selected. Setting prop todayBackgroundColor to transparent can remove the today highlight, but since the text color for today is also set to transparent, no date is visible.

It would be helpful to add a prop such as disableTodayStyling to bypass highlighting today's date.

The calendar, when loading up, if the next button is pressed, the month days don't update. See gif

Is it possible to modify this calendar to shown only months and year, i want to modify it to show only months and years like below view

<     2017           >
   Jan   Feb    Mar
   Apr   May    Jun
   Jul   Aug    Sep 
   Oct   Nov    Dec

I just upgraded to the latest RN and I'm getting a load of @providesModule naming collision errors coming from CalendarPicker - too many to paste them all but for example..

This warning is caused by a @providesModule declaration with the same name across two different files.
Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: /Users/simon/dev/MyApp/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/simon/dev/MyApp/node_modules/react-native-calendar-picker/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

I can't really figure out if this is a RN issue or something that can be addressed in this component. The latter seems more likely as it's the only package I've added since and comes up in all of the errors.

Thanks

RN v0.43.3
CalendarPicker v5.7.0

Are you considering implementing the week and day views?

I see that's on your TODO, but do you have any progress on this already?

Commit 6c253d9 re-introduced react-native to dependencies again. This results in the error Update UnableToResolve 'ActivityIndicator' due to a nested copy of react-native inside CalendarPicker.

@stephy : please prioritize removing it and publishing an update to npm as it's breaking any react-native project using this library.

expected behavior - would be that if you change the month then the selectedDate remains the same (out of view).

actual behavior - selected date follows you Oct. 15 -> Nov 15

The expected is how all OS calendars I've seen seem to work. I looked at this code briefly and had no thoughts on where to begin. Any suggestions?

I'm sure I'm just missing something silly, but if I try to set minDate like this
minDate={new Date(2017,4,17)}

It sets the minimum date as May 17, 2017 instead of Apr 17, 2017. It's easy enough to just do M-1, but before I do that I wanted to see if I'm missing something.

Awesome work BTW, best calendar component out there, so thank you!

Is there any specific reason you are having the images separated from the repo?
The current solution isn't the best because it's creating an huge dependency to the website that hosts those images.

I would suggest that we change

source={{ uri: 'http://stephanimoroni.com/kalendar/images/[email protected]'}}/>

(source) to

source={{ uri: 'images/[email protected]'}}/>

and the same with the right arrow. (source)

An optional prop to pass in to prevent future dates from being selected.

While working on this, it'd be good to add an option to prevent past dates from being selected as well.

Just looking at jQuery's DatePicker, their API uses minDate and maxDate. Probably good to stick with a similar interface, so ours would look like:

let tomorrow = new Date();
tomorrow.setDate( ( new Date() ).getDate() + 1 );

<CalendarPicker maxDate={tomorrow} />

And for minDate:

let yesterday = new Date();
yesterday.setDate( (new Date() ).getDate() - 1);

<CalendarPicker minDate={yesterday} />

@stephy If you have any thoughts on this that would be great. I'll do a PR if you provide some guidance.

Just wanted to let you know, that if I install current master branch, my app will not start due to some errors. It might be nothing. Maybe just my configuration ( I am using react-native": "^0.44.0"). Latest commit that everything works fine for me is 1b460d7

error: bundling: Error: ENOENT: no such file or directory, open '/node_modules/react-native-calendar-picker/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)
at Module._readSourceCode (/Users/urska/Documents/Projects/git_repos/goopti-driver-app/node_modules/react-native/packager/src/node-haste/Module.js:200:29)
at Module._getCacheProps (/Users/urska/Documents/Projects/git_repos/goopti-driver-app/node_modules/react-native/packager/src/node-haste/Module.js:420:29)
at Module._readFromTransformCache (/Users/urska/Documents/Projects/git_repos/goopti-driver-app/node_modules/react-native/packager/src/node-haste/Module.js:376:29)
at Module.readCached (/Users/urska/Documents/Projects/git_repos/goopti-driver-app/node_modules/react-native/packager/src/node-haste/Module.js:363:25)
at Promise.resolve.then (/Users/urska/Documents/Projects/git_repos/goopti-driver-app/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:167:29)
at process._tickCallback (internal/process/next_tick.js:103:7)

I installed version 5.10.0 via npm.
Now even I remove node_module and this CalendarPicker in package.json, my project still not able to rebuild.

The error "Update UnableToResolve 'ActivityIndicator' ..." is showing all the time.

Hi, Thanks for your component but i've this error after installed it.

Bundling: UnableToResolveError: Unable to resolve module react/lib/LinkedStateMixin from /Users/user/Documents/Projets/ZProjects/app/mobile/project/node_modules/react-native-calendar-picker/node_modules/react-native/Libraries/react-native/react-native.js: Module does not exist in the module map or in these directories:
/Users/user/Documents/Projets/ZProjects/app/mobile/project/node_modules/react-native-calendar-picker/node_modules/react/lib
, /Users/user/Documents/Projets/ZProjects/app/mobile/project/node_modules/react/lib
, /Users/user/node_modules/react/lib

React-Native V : 0.45.1
React V : 15.6.1

Thanks :)

My app won't start. I'm getting this error now.
Error: @providesModule naming collision:
Duplicate module name: jsc-heap-capture

Help pls!

After selecting a date in the UI, the onDateChange callback doesn't report the new selected date. It requires two taps to make it report correctly.

I suspect this is the result of the addition to .babelrc of "presets": ["babel-preset-expo"]. Should this be added as a peer dependency?

Out of the box, this is what the calendar looks like on the iPhone 5s simulators (and down):

How do I get it to fill the width of the screen without it overflowing on smaller phones?

I think a lot of it has to do with the hard coded widths in Styles.js.

I had some success by replacing the hard-coded widths in the wrappers with justifyContent: 'space-between but ran into some problems, mostly due to my inexperience with flex.

Hi @stephy ,
The height of dates are too much so it's no room for other component below the date picker when running in the small devices. Ex: iPhone 4

How can I resize that height?
Thanks.

@stephy
The fix that moved React from dependencies to devDependencies isn't on npm, and it's causing repeated failures on the newer releases of RN:
facebook/react-native#14302

It would be very helpful to publish the latest version to npm to prevent people from hitting this bug again and again.

It would be nice if we could make this compatible (maybe it is) with NPM.
Copy/paste the code isn't a good practice because everyone that is using the picker will need to manually update the code when we make changes.