wangzuo / input-moment Goto Github PK
View Code? Open in Web Editor NEWReact datetime picker powered by momentjs
Home Page: https://wangzuo.github.io/input-moment
License: ISC License
React datetime picker powered by momentjs
Home Page: https://wangzuo.github.io/input-moment
License: ISC License
Hi man,
great library, but I have a problem.
I installed the module in order to include it in my react app with the command: 'npm install input-moment'.
When I build my app I get the following error:
ERROR in .//input-moment/src/input-moment.js
Module parse failed: /Users/antonioromano/development/GeoUniq/web/console/GUConsole/node_modules/input-moment/src/input-moment.js Line 28: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| return (
|
It seems the module is parsed with the wrong parser, do you know anything about
Hi,
When my input-moment calendar loads saved data to show previously selected date, it always selects the current date and not what I saved before.
In my FormComponent:
<Field
name="starts"
value={eventStarts}
component={DateTimePicker}
withRef
/>
In my DateTimePicker:
render() {
return (
<InputMoment
moment={this.state.m}
onChange={this.handleChange}
minStep={5}
/>
);
NOTE: It properly saves data in the datastore so I know it works this part. The part that doesn't work is re-selecting the last chosen date.
Allows you to select an initial tab in case you want to go straight to the time picker, also allows hiding of tabs to ensure users stay on the given tab.
Code available on my fork @ https://github.com/trayio/input-moment.
Let me know if you want me to make a PR for either feature and I will split them and write tests.
Hey,
Would you consider implementing lockable days (an array of days that will not be selectable) and/or editable ranges (say you don't want to allow past days)?
Hello,
We are failing on accessibility testing due to date number and time slider are not accessible with keyboard. I can add tabindex = 0 to those td elements but I couldn't involve onClick event , same issue with the time slider. Can we get those fixed ?
Thanks !
Not a big problem (for now). But WILL be when React 16.0 is official (which won't take long).
Just switch to independent 'prop-types' package and everything will be OK.
Official warning goes like this:
Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
Where can I find a changelog?
Add an option to configure which is the first day of week (currently Sunday by default, but I need it to be Monday).
Hi there,
I have downloaded your files from dist. I am doing this without node. This is my code:
<link rel="stylesheet" type="text/css" href="/assets/js/3rd/input-moment.css">
<script src="/assets/js/3rd/moment_with_locales.js"></script>
<script src="/assets/js/3rd/input-moment.js"></script>
However InputMoment
is not defined. Can you please show me how to access InputMoment
without having to use node?
Thanks
would be nice to have this updated for react 15.5.0 :)
By next/prev buttons I'm referring to the buttons above the calendar that let you jump to the next or previous month.
I have a use case where it is not very user friendly to have it actually change the date when next/prev month is clicked. I expanded on this project to create a range picker with min/max date constraints.
Take the following use case:
You have the start date set to November 20th and the end date set to December 5th.
With the default behavior of the input-moment
package, hitting "prev month" on the end date would change the end date to November 5th. With the added min/max date constraint functionality
hitting "prev month" in this case actually does nothing (because hitting prev month results in the end date becoming a value that is before the start date) and makes the calendar appear broken.
I would like to request a new boolean prop to allow us to toggle on/off if the actual date value changes when next/prev month buttons are clicked
You are not providing the event argument when calling "handleClickTab" method so it will throw the error i mentioned in the title, just change:
onClick={() => this.handleClickTab(0)} to onClick={(event) => this.handleClickTab(0, event)}
and
onClick={() => this.handleClickTab(1)} to onClick={(event) => this.handleClickTab(1, event)}
and it should be good :)
I'm very pressed for time and unable to submit this as a standalone pull request, but I have added support for it in my fork here: https://github.com/aikar/input-moment
Hoping you can add this officially (so if I can get all of my changes into this repo I can go back to using yours)
Split pane mode should show both side by side as shown in my fork.
Hello! I'm trying to add a validation to the component, conditionally setting state in the onChange callback. It seems it doesn't work really well due moment.js object mutability.
See the screencast attached and the commit Enieste@14e04be (the time of screencast create is around 6:10 PM)
One way to handle this is passing moment={moment(this.state.m)}
(i.e. clone of an object) but the component will still remain partially buggy (you can check yourself, moving the slider towards the right quick enough).
Not that the bug can be reproduced if you move the slider quick enough. You'll have a different output depending on slider movement speed.
Screencast: https://www.youtube.com/watch?v=FbqMIWDJMrk
Hope it makes sense.
Hey,
First of all, input-moment is a very nice looking and easy to use component (end-user wise).
But I got several problems with your component
Please update lodash to v4
It's as simple as changing calendar.js
var range = require('lodash/range');
var chunk = require('lodash/chunk');
Sorry for filing so many tickets, but I have another feature that would be really handy. Right now there's no way to open the calendar on the time-picking tab. This is controlled by this.state.tab
in input-moment, but that state isn't set from any prop.
If there was either a way to pass a tab
prop, and have this used as the initial state, or have some other sort of mode="time"
, "showTime={true}", etc. that would be great. I could even file a pull request for it, if you just let me know which prop
to use.
Thanks.
How about the option to select multiple dates and push them to an array (using ctrl for multiple days, shift for a range).
If you like the idea I'd be down to build it with you!
It seems the library sets i
and w
properties on a <td>
it renders, but because those aren't valid HTML attributes React complains about them:
warning.js:36 Warning: Unknown props `i`, `w` on <td> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in td (created by Day)
in Day (created by Calendar)
in tr (created by Calendar)
in tbody (created by Calendar)
in table (created by Calendar)
in div (created by Calendar)
in Calendar (created by InputMoment)
in div (created by InputMoment)
in div (created by InputMoment)
in InputMoment (created by MyCode)
... (the rest of the stack is my code which renders an InputMoment)
Obviously a warning doesn't really hurt anything, but it would be nice if this could be fixed.
has anyone thought about merging the fork react-input-moment into this repo? it has extended functionality. Thanks.
Hi, great work on this.
I found a quick way to jump to todays' date. Handy feature I think!
todayDate(m) {
this.setState({ m:moment() });
}
<button onClick={this.todayDate.bind(this)}>today</button>
it would be nice to have the ability to set a min/max date on the component. leveraging the onChange
callback that's already there with moment.js
wouldn't be too difficult to implement that, but it's difficult to give a visual indicator (applying styles or class names) of what dates are "disabled" from outside the component
currently its using HH for military time hour, should use hh for regular people time
Focus indicator is not visible under input moment controls on date and time, previous and next icon control.
This is a great libraryππ½
I just wanted to recommend an enhancement: The ability to select whether to display military time or 12-hour format. I like the design you got the inspiration from
https://dribbble.com/shots/1439965-Due-Date-and-Time-Picker
Military format: The time display appears exactly as you have it already.
12-hour format: The time display is more similar to the design link mentioned above.
Thanks for your contribution!
Currently if you do:
<InputMoment className="foo" id="bar" style={{display: none}} />
it behave the exact same as:
<InputMoment />
It would be nice if InputMoment
could take those three as props, and then pass them along as props to the first element it renders (<div className="m-input-moment">
). Of course, since that element already has a className, you'd want to combine them somehow ...
const className = (this.props.className || '') + ' m-input-moment';
return <div className={className} id={this.props.id} style={this.props.style}>
Adding this functionality would help make it easier to hide/show the calendar in response to an input being focused (a common pattern), and would just make the library more flexible in general.
Thanks for considering this.
Currently the only way to set time is with the sliders. Would be very helpful to be able to enter hours and minutes with the keyboard in addition to the sliders.
Thanks in advance.
Are the styles intentionally note included in this package? I installed it via NPM, added the component and got a completely unstyled, barely functional date picker.
Simple fix, PR coming π
Is date range supported?
Hello. I've been comparing React-based date and time pickers, and input-moment
looks to be the best. However, getting up to speed with it could be a little easier. If you ...
Included an import
or require
line in the readme.md instructions code; without this one doesn't know whether to do import InputMoment from 'input-moment'
or import {InputMoment} from 'input-moment'
Mention the CSS requirements (and how to fulfill them); right now there's no mention of the CSS on the readme.md, but obviously the CSS is pretty important to the library
Thanks for making input-moment!
Add a "Today" button to bring the calendar to the current month, year and day.
Sorry in advance for the noob question.
I am importing input moment, like so:
import InputMoment from "input-moment"
However, after babel compiles I get a Uncaught ReferenceError: moment is not defined
I have Moment included in the project already (we're using it elsewhere). Any thoughts on what I might be doing wrong?
Warning: Unknown props i
, w
on tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in td (created by Day)
in Day (created by Calendar)
in tr (created by Calendar)
in tbody (created by Calendar)
in table (created by Calendar)
in div (created by Calendar)
in Calendar (created by InputMoment)
in div (created by InputMoment)
in div (created by InputMoment)
I got the main component working but I am having a hangup on getting the styling to work, I have imported the less
file with
require('input-moment/src/less/input-moment.less')
in my main js file and then also imported the css from ionic in the html file...
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
but I am seeing this when I try to follow the example...
so I must be missing some crucial styling somewhere, do you have any idea where that would be?
should have a way to change the language of days and months, as well as the name of the tabs.
Hi,
I am having problems importing your library.
import InputMoment from 'input-moment'
throws an unexpected token error on JSX-style html tags in your code (uncompiled JSX). When importing from the dist folder it compiles (import InputMoment from 'input-moment/dist/input-moment'
), but then I get the error:
ReferenceError: Can't find variable: React | input-moment.js:1
Do you have any idea why? Is it a bug in deployment or is it just me? :-) I'm trying it on a project that works like a charm otherwise, built by a gulp build script using babelify+browserify.
ERROR in ./index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/input-moment in C:\Users\ADMIN\Desktop\redux\time
@ ./index.js 3:17-46
webpack: Failed to compile.
I am looking for a time picker on react native for Windows...
Thanks
.
Hi,
Instead of changing one minute at a time, I'd like to change it to go up by say 5 minute increments.
Would this be possible?
Thanks
Possibility to set a "Save" button text.
It is possible to ignore these directories with .gitignore but still publish them to NPM.
In package.json under scripts,
add:
prepublish: "rm -rf lib dist ; npm run build ; touch dist/.npmignore lib/.npmignore"
This will for 1, auto build anytime you deploy to NPM, but also touches an .npmignore which cancels out the .gitignore for NPM, allowing those folders to be deployed.
See example: https://github.com/aikar/capsule/blob/master/package.json#L12
Warning: React does not recognize the minDate
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase mindate
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
npm install react-moment --save
npm i input-moment --save
[email protected] /Users/mac1/Dev/A51/FrontendReact/FireRedux
βββ¬ [email protected]
βββ [email protected]
βββ [email protected]
βββ UNMET PEER DEPENDENCY react@^0.14.0
βββ UNMET PEER DEPENDENCY react-dom@^0.14.0
βββ [email protected]
import Moment from 'moment'
import InputMoment from 'input-moment'
render: function(){
return (
<InputMoment
moment={this.state.moment}
onChange={this.handleChange}
onSave={this.handleSave}
/>
);
}
});
This returns the error in calendar.js
Line 40 entitled:
Uncaught TypeError: Cannot read property 'date' of undefined(β¦)
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.