rudeg / react-input-calendar Goto Github PK
View Code? Open in Web Editor NEWHome Page: http://rudeg.github.io/react-input-calendar/
License: MIT License
Home Page: http://rudeg.github.io/react-input-calendar/
License: MIT License
Using Chrome, unable to select a date in the calendar pop up. Copied all CSS settings from package styles
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.
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?
When the component is disabled, the calendar is visible when it should be hidden.
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!
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 ๐๐ฟ
Localization would be nice, e.g: German (and Monday as first day of the week)
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
Would be nice to have an option where the date picker would close once the user has clicked on a date.
"react": "^15.0.1",
"react-input-calendar": "^0.3.1",
var Calendar = require('react-input-calendar');
// ... render method
return <Calendar format="DD/MM/YYYY" date="4-12-2014"/>;
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`.
// ... loaders
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|models)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
Using the left and right arrows, the calendar popup closes on click of one of the arrows
probably use classnames instead?
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
The version on NPM doesn't include props to disable.
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
The default inputFieldClass is assigned, but not returned in the getInitialState so default className for Input field is not applied.
I'd like to disable dates before today, is there a control with which this can be done? Thanks!
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
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
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?
And same is missing now in the github repo also.
From the Month view (1), when you click on a month this error is thrown:
Uncaught TypeError: Cannot read property 'checkIfMonthDisabled' of null
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)
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!
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)
);
}
The "today" button selects the current date and updates the input, but does not fire the onChange property.
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 :)
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:
handleChangeStart(startDate){
this.setState({startDate});
}
handleChangeEnd(endDate){
this.setState({endDate});
}
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.
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'.
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.
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.
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,
The version on NPM doesn't include changes made recently, like the min and max date ranges.
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
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() ?
mistake
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!
Seems like this depends on font-awesome?
Might want to mention that in the readme :-)
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
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?
How can I change language in names of month and days of week?
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 :)
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.