wangzuo / input-moment

React datetime picker powered by momentjs

input-moment

React datetime picker powered by momentjs

The design is from https://dribbble.com/shots/1439965-Due-Date-and-Time-Picker.

The icon is from ionicons.

Installation

npm i input-moment --save

Notice: This module requires moment as a peerDependency.

Demo

http://wangzuo.github.io/input-moment

Usage

<InputMoment
  moment={this.state.moment}
  onChange={this.handleChange}
  onSave={this.handleSave}
  minStep={1} // default
  hourStep={1} // default
  prevMonthIcon="ion-ios-arrow-left" // default
  nextMonthIcon="ion-ios-arrow-right" // default
/>

Check app.js for a working example.

Development

• npm install
• npm start
• http://localhost:8080

License

ISC

input-moment's Issues

anyway to specify time format ?

currently its using HH for military time hour, should use hh for regular people time

Ignore lib/dist on git

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

Add a "Today" button

Add a "Today" button to bring the calendar to the current month, year and day.

Possible Instruction Improvements

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 ...

1. 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'

2. 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!

Allow keyboard time input

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.

Invalid <td> Props Warning

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.

Warning: Unknown props `i`, `w` on <td> tag for react <= 15.3.2

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)

Change time by 5 minute increments

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

Cannot import input-moment

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.

Accessibility: Focus indicator is not visible

Focus indicator is not visible under input moment controls on date and time, previous and next icon control.

Changelog

Where can I find a changelog?

Styles note included?

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.

Accessibility: Date number and time slider are not accessible with keyboard

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 !

locale support

Clicking previous month's `31` has no effect if current month only has `30`

Simple fix, PR coming 😜

Moment.js mutability issue (+validation)

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.

Awesome component, enhancement idea

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!

Cannot read property 'preventDefault' of undefined. in input-moment.js

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 :)

replace moment with date-fns

Change Language Name

should have a way to change the language of days and months, as well as the name of the tabs.

First day of week

Add an option to configure which is the first day of week (currently Sunday by default, but I need it to be Monday).

Date Range?

Is date range supported?

min and max dates

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

You may need an appropriate loader to handle this file type.

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 (
|

|

| <button type="button" className={cx('ion-calendar im-btn', {'is-active': tab === 0})} onClick={this.handleClickTab.bind(null, 0)}>
@ .//input-moment/index.js 1:17-46

It seems the module is parsed with the wrong parser, do you know anything about

PropTypes via the main React package is deprecated

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

Save button text change.

Possibility to set a "Save" button text.

Error importing after Babel comp

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?

Feature Request: Lock days / editable range

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)?

Several issues

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

• Using input-moment in a won't work, as the time/date switch buttons cause the form to submit
• I wasn't able to use it without copying the /src to my own /app folder, as the compiled sources require moment.js globally (or not? it kept on complaining)
• Why did you add Array.prototype.chunk to the array prototype, instead of just exporting and using a 'chunk(array, chunkSize)' function?

node_modules\input-moment\src\calendar.js: Line 21: Unexpected token {

Update Lodash

Please update lodash to v4

It's as simple as changing calendar.js

var range = require('lodash/range');
var chunk = require('lodash/chunk');

Does it work on Windows ?

I am looking for a time picker on react native for Windows...
Thanks

while giving npm start,it is showing errors

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.

The ability to display time in 12-hour format

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!

how to get styles to work

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?

No "Pass-Through" Props (eg. className, id, style) on InputMoment

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.

Ability to Start Calendar on Time Tab

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.

.

.

minDate and maxDate not working

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.

#85

Without node?

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

feature request: boolean prop to determine what happens when next/prev month buttons are clicked

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

Jump to todays date

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>

merge

has anyone thought about merging the fork react-input-moment into this repo? it has extended functionality. Thanks.

Doesn't select previously chosen date on load

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.

Split pane mode

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.

http://i.imgur.com/ncJCtI8.png

rollup build

Cannot read property 'date' of undefined & npm install peer dep. unmet

1. npm install react-moment --save
2. npm i input-moment --save
   2a. Above gives me the error:

[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] 

3. Then my code is:

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(…)

Allow default tab + hiding of switch tab buttons

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.

React.createClass is deprecated

would be nice to have this updated for react 15.5.0 :)

date only or time only mode