rudeg/react-input-calendar

react-input-calendar's Issues

Version on NPM isn't up to date.

The version on NPM doesn't include changes made recently, like the min and max date ranges.

Uncaught TypeError: Cannot read property 'firstChild' of undefined

I get the above error using your component. It seems that the error originates from inconsistent use ofe require calls to react and reactaddons. Could you give me a hint on how to fix this?

moment-range.js?35b0:5Uncaught TypeError: Cannot set property 'DateRange' of undefined

Hi, Rudeg.

I use a react-input-calendar on my tiny proejct. I follow way which is writing on this page. But, It has an error. Please answer me what I missed. And I'm sorry about my english. Thank you!

missing svg icon

I upgraded to the newest version so that I would be able to use on focus.

I am importing your css file in to my scss file. It used to work fine, and once i changed it to the new path it was working until this build error from web pack.

Cannot resolve 'file' or 'directory' ../../icon/calendar.svg in /PATH/node_modules/react-input-calendar/style

i'm not sure if you meant to remove the svg or that line in your styles but just thought id let you know.

thanks for the great component.

Edit:

now inspecting I see you inlined the svg, so then removing it from the css file is the correct move.

New option: hide calendar icon but open calendar on focus

I would like to make it look more similar to the bootstrap datetimepicker.

So, how about a new option to hide the calendar icon but to open the calendar when the input field gets the focus?

That would be great, thanks

How to use date from and date to?

Hi, I'm using maxDate at start date and minDate at end date but when I'm updated this.state of start date and end date maxDate and minDate on Calendar not follow up my state.
From:

To:

---

function handleChange

handleChangeStart(startDate){
this.setState({startDate});
}
handleChangeEnd(endDate){
this.setState({endDate});
}

issue with openOnInputFocus

hey there,

I am noticing a bug functionality with the openOnInputFocus prop.

I logged things out, and the set visibility function works the same, and in last check they both set isVisible to true.

if (this.state.isVisible !== value && !this.props.disabled) {
     this.setState({ isVisible: value });
}

However then when you get to the render function the visibility bool is flipped back to to false when i click from the icon so it passes over the ternary to create item, however when you focus from the input the visibility is set to true (which makes sense, but makes calendar equal to the empty string) .

var calendar = !this.state.isVisible ? '' : _react2.default.createElement(
        'div',
        { className: calendarClass, onClick: this.calendarClick },
        view,
        _react2.default.createElement(
          'span',
          {
            className: 'today-btn' + (this.checkIfDateDisabled((0, _moment2.default)().startOf('day')) ? ' disabled' : ''),
            onClick: this.todayClick },
          todayText
        )
      );

Ill do some more logging, and see what I can figure out, but I thought you might have a better idea, of where that bool might be getting reset to false.

How can I chachge language in names of month and days of week?

How can I change language in names of month and days of week?

Update react version to 0.13.2

Bumping version and publishing to npm

There hasn't been a version bump since 0.1.11 and there have been updates since then. Mind bumping the version and publishing?

Thanks!

Diff since 0.1.11: 2a430a4...9493232

running issue with npm start

hi,
I am having issue with running the project with "npm start",
so could you please look at that ?

How do we run the project?

appreciate your response ASAP

Change dependencies to peerDependencies

Hi,

you have multiple dependencies. When I am using your component (which is by the way very nice!) in my react-project and bundling it with webpack or browserify I will have react twice in my bundle and it gets quite big.

So you should move react, react-dom, moment and maybe moment-range to the peerDependencies. I think classnames is special enough to keep staying in the default dependencies.

If you are willing to merge, I could create a PR.

Cheers

Dustin

Moments I18n support

mistake

IE 11 does not respect minDate prop

Set the minDate to new Date(). Open datepicker in IE 11. Dates before today are enabled. The "disabled" class was not added to the div for the prior date cells
thanks

onChange does not work with this.props.dispatch({})

onChange does not work with this.props.dispatch({})"
onChange={this.props.dispatch({type, payload})} doesn't cause changes of the local state of the Calendar component - so I cannot change nor date in the input neither month.
Could it be caused by the changeing of the "this" context?

Every click's default is prevented

Hi, I've been working with this library, and it worked out very well so far, except for a couple of issues that got in my way. One of those is the fact that wherever I instantiate the class it will capture all document clicks and prevent their default.
I have to say that I modified the library a bit to bend it to my app layout's requirements, but I'm pretty sure this behaviour is still present in this module repository.
This issue obviously disables many things, I realised cause my labels stopped focusing their inputs after instantiating the calendar, but preventing every single document click is a very bold decision.

Anyway, it might be just me, but if someone else comes across this issue, solution is pretty easy, just delete e.preventDefault(); from this.documentClick = function (e) (index.js line 266 aprox)

Current released version (0.3.1) doesn't have props.disabled

And same is missing now in the github repo also.

"cell" class is not assigned to the cell, thus breaking the view

The cell class which basically brings the whole calendar together is not being assigned to the cells. I believe this is due to the warning in the example page:

Warning: Don't set .props.classes of the React component <exports />. Instead, specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props. The element was created by exports.

Most likely the bundle used in the example page is still using react 0.13.x. In react 0.14.* and Chrome the calendar is completely broken.

The fix is easy, though:

/** Cell.js */
    render: function () {
        var classes = this.props.classes;
         classes += ' cell';

        return (
            React.createElement("div", {className: classes}, this.props.value)
        );
    }

Render error

"react": "^15.0.1",
"react-input-calendar": "^0.3.1",

---

Usage:

var Calendar = require('react-input-calendar');
// ... render method
return <Calendar format="DD/MM/YYYY" date="4-12-2014"/>;

---

warning/erros

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Filters`.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Filters`.

---

Webpack config:

// ... loaders
{
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components|models)/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015']
    }
}

Ability to Select Year from the Calendar

Hello,

I think a feature that would be helpful is to provide a way to change the year through the GUI. Maybe this is already available and I am not seeing how?

Thanks,

Marc

Disabled component still show calendar

When the component is disabled, the calendar is visible when it should be hidden.

How to disable past dates?

I'd like to disable dates before today, is there a control with which this can be done? Thanks!

Calendar does not close on Selecting a Date

Hi,
I used this component when creating a date picker for my project . But the issue I am facing is that whenever I select a date the calendar does not close. If i click outside it , the date picker closes.
I tried using closeOnSelect but there also when i click on the prev and next arrow to switch between months the calendar closes. This is not required. Can u please help us on this as it is at a very high priority in our project and our delivery date is near .

Thank you :)

Combined and combined+minified dist version

Hi,

First of, great work on your date picker!

Previously the generated dist file was a single combined js file, now each source file has a corresponding dist file instead. Will you add the possibility to generate a single dist file again (and minified version)?

The new dist files does not work for me, I get exports is undefined for the part below when I try to use them in our project

Object.defineProperty(exports, "__esModule", {
  value: true
});

I copied the new source code to the old build scripts and run them which created a single combined js dist file which worked. I'm not to handy with webpack, babel and all of those tools so I have a hard time fixing it and creating a PR myself.

Thanks!

Calendar closes when switching between months

Using the left and right arrows, the calendar popup closes on click of one of the arrows

Default Class for Inout field is not working.

The default inputFieldClass is assigned, but not returned in the getInitialState so default className for Input field is not applied.

"Today"-button does not fire onChange

The "today" button selects the current date and updates the input, but does not fire the onChange property.

Warning: React.addons.classSet will be deprecated in a future

probably use classnames instead?

Broken in Firefox

As far as I can tell, it doesn't work at all in Firefox.
I am running version 37.0.2 on Windows 8.1

Localization & Week starting day

Localization would be nice, e.g: German (and Monday as first day of the week)

How to get current date onChange ?

I am using
<Calendar format='dddd DD MMM' date={this.state.value0} inputName="date" computableFormat='MM-DD-YYYY' onChange={this.handleChange} />`

How can I get value of current input value in handleChange() ?

format with YYYY,bug get value YYYY-MM-DD,can i get value with YYYY pattern?

safari Invalid date

safari show Invalid date Need to be replaced '01/01/2016' Can be compatible with the processing

Version on NPM is not up to date.

The version on NPM doesn't include props to disable.

openOnInputFocus warning due to propType

Hey, great component, thanks for sharing.

I found an issue while setting the openOnInputFocus prop. Browser throws a warning because the docs define the prop as boolean, but in the code the expected propType is func, especifically in: https://github.com/Rudeg/react-input-calendar/blob/master/src/index.js#L30.

Still works, but it would be nice to get rid of the warning. Do you mind if I submit a PR with the proposed fix?

Thanks!

inputValue causing component to go from controlled to uncontrolled

When using the version 0.3.11 with react 15.3, I see the following warning in the develop console:
Warning: value prop on input should not be null. Consider using the empty string to clear the component or undefined for uncontrolled components.

What is happening is when first rendering the Calendar, the inputValue is undefined. If you select an invalid date, like 'abc', with strictDateParsing the inputValue changes to null and thus when the component is re-rendered, its now in a controlled state. If I modify the index.js to set the default state of inputValue to an empty string...and anywhere else in the code where an invalid date causes a state change to inputValue to be an empty string instead of null...all problems go away.

This was found because, in my implementation, we wanted to clear the input field value if the date is invalid instead of showing what the user entered, like 'abc'.

Updated Moment Constructor

https://github.com/Rudeg/react-input-calendar/blob/master/dist/Calendar.js#L26

Possible to flip to this to quiet the moment deprecation message in the console?

    getInitialState: function() {
        var format = this.props.format || 'MM-DD-YYYY',
          date = this.props.date ? moment(this.props.date, format) : null,

Can we please have tagged releases?

It would make it a lot easier to navigate changes to the code at the point of release. It's difficult to go to 0.1.14, for example, without going through the commit messages. If it were tagged, it would be as simple as git checkout v0.1.14. Thanks for the great work 👍🏿

Add a "close on select"-option

Would be nice to have an option where the date picker would close once the user has clicked on a date.

Weekday locale 'es'

Today is 21-03-16 monday / Lunes (lu) and shows: Sunday / Domingo (do)
Weekdays name start on Monday.

Uncaught Type Error: Month View

From the Month view (1), when you click on a month this error is thrown:

Uncaught TypeError: Cannot read property 'checkIfMonthDisabled' of null

If date is blank, calendar popup is unusable

To reproduce, remove date from demo page input field. Click on calendar icon and try to click the Month, error in console occurs;
Uncaught TypeError: Cannot read property 'month' of null MonthsView.js:29

Click off popup to close it.
Clicking on calendar icon now does nothing, console display same error message.

Date picker doesn't handle January cross over dates properly

Set the date using the calendar to a date in January 2015 or 19-01-2015 (for today, when the issue was written).

Open the date picker again and select the greyed out '29'. Instead of setting to 29-12-2014 it sets to 01-03-2015:

npm and github releases out of sync

Your github releases page says the latest release version is v1.1.4 but the npmjs.org page says the latest version is v0.1.20.

When I do npm install, I get this error:

npm WARN deprecated [email protected]: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
npm WARN prefer global [email protected] should be installed with -g

reactify has been deprecated in the link given in the error message. Let me know if any help is needed in moving away from reactify :)

Trigger onChange via keypress

Hi,

I really miss a feature like this. Maybe implement something like this in Calendar.js?

inputKeyDown: function(e) {
  switch(e.keyCode) {
    case 13:
      this.inputBlur();
    default:
      e.stopPropagation();
  }
}

Regards
Benjamin

check typescript definitions

Hello! Thank you for this calendar!
I added defintions for typescript
please, check
definitions for your library
if all correct - add comment that all ok
Thank you!

New feature: Limit selection to a date range

I'd like to add a new set of props: minDate and maxDate that optionally will limit the minimum or maximum date that a user can set using the component. The unselectable dates would then be greyed out.

If you're ok with that, I'll PR in an update.

Unable to interact with calendar (mouse or keyboard)

Using Chrome, unable to select a date in the calendar pop up. Copied all CSS settings from package styles

Requiring 'react-input-calendar' needs devDependencies?

I was quickly trying out this component and ran in to this issue by just doing:

var Calendar = require('react-input-calendar');

It is giving errors that can't find reactify or envify:
{ [Error: ENOTDIR, stat '/../node_modules/react-input-calendar/index.js/node_modules/envify']
errno: 27,
code: 'ENOTDIR',

I can get it to work by running npm install in react-input-calendar directory but it installs all devDependencies including react which I already have in my project. Am I doing something wrong here or should the npm package e.g. include the built 'dist/input-calendar.js' file by default?

Mention font-awesome dependency

Seems like this depends on font-awesome?

Might want to mention that in the readme :-)