arqex / react-datetime Goto Github PK

If i have many on the same page, how do i get the value of each one? Is there a way to specified an id for each or?

Hello, thank you for making great datetime picker on react.

Is there any plan to support timezone selection?

How I could fix this issue? I'm getting peerDependencies error when I try to update to 2.0.

Looks the problem is coming from npm ERR! peerinvalid Peer [email protected] wants react@^0.14.3.

Currently I'm using "react": "^0.13.3"
While I need to upgrade my react-datetime to 2.0 since I'm getting error of OnClickOutside in IE9 on my current "react-datetime": "^1.3.0"

I can't actually see in the readme where you get the value of <Datepicker />? Can you still use refs?

Hi,

I have a component that wraps a DateTime (there is a small button with a calendar icon at the end).

Here is the code

import React, {Component, PropTypes} from 'react'
import FormInput from 'components/form/form-input/form-input.jsx'
import ReactDatetime from 'react-datetime'

export default class Datetime extends Component {
  state = {
    open: false
  }
  toggleOpen() {
    this.setState({open: !this.state.open})
  }

  render() {
    let {error,hint,className,...other } = this.props

    return (
      <FormInput className={`form_datetime form_input--merged ${this.props.className}`} error={this.props.error} hint={this.props.hint}>
        <ReactDatetime {...other} open={this.state.open}/>
        <button className="btn icon-end" onClick={::this.toggleOpen}><i className="icon icon-calendar"/></button>
      </FormInput>
    )
  }
}

Changing state.open doesn't do anything
I already tried a patch in componentWillReceiveProps:

if( nextProps.value != this.props.value || nextProps.open != this.props.open) {
    update = this.getStateFromProps( nextProps );
}

But when i do this, the calendar won't close on blur.

Basically i just want to be able to control the opening of a calendar, but the open prop doesn't do it.

Thanks in advance,

Nadir

I'm getting some conflicts with other classes applying styles to react-datetime component parts.

Would you consider namespacing all classes? eg.

td.month,
td.year {
    height: 50px;
    width: 25%;
    cursor: pointer;
}
td.month:hover,
td.year:hover {
    background: #eee;
}

could be changed to

.rdtMonth,
.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
}
.rdtMonth:hover,
.rdtYear:hover {
    background: #eee;
}

and

.rdtPicker th.switch {
  width: 100px;
}

could be changed to:

.rdtSwitch {
  width: 100px;
}

Explore moment.js to add locale support to the library

line https://github.com/arqex/react-datetime/blob/master/dist/react-datetime.js#L10

should be

define(["react", "moment"], factory);

same for this line https://github.com/arqex/react-datetime/blob/master/dist/react-datetime.js#L12
undefined should be replaced for lib names.

I don't know webpack to propose a fix, also tried to build it locally and couldn't, the following error happens:

Error: Path doesn't exist '/home/mariano/soft/react-datetime/react-datetime.js'

to achieve that I had to run gulp manually since npm build seems to be configured to only work on windows.

After npm install (with react-datetime version 0.4.0) the node_modules/react-datetime directory contains the following:

$ ls
css  DateTime.js  gulpfile.js  LICENSE  node_modules  package.json  README.md  test

The DateTime.js file expects there to be a src directory, and I think you might also want there to be a dist dir in there.

Seems to be some sort of packaging error.

I have moment and react-datetime loaded with an alternate locale

var moment = require('moment');
var moment_de = require('moment/locale/de');
var Datetime = require('react-datetime');
//...
return (<Datetime locale="de" />);

Yet it does not seem to work. The react-time plugin works though.

This is the test code:

var DateTime = require('react-datetime');

var TestTag = React.createClass({
    render: function() {
        return (
                <div>
                <p>hello</p>
                <DateTime/>
                </div>
        );
    }
});

This is the error message, I get:

Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

A quick google suggests me other react plugin also sometime stumbled upon the same problem: jasonkuhrt/react-popover#23

ex.

it seems that it only works on first load, it the props changes the calendar locale render does not changed

Apologies if I didn't check the documentation well. Was in a hurry.

I wonder if range selection is possible with passing a prop or so with this? In that case, how one could do that?

Thanks.

Could the css be amended so the css for .rdtPicker has a relative position instead of absolute?

It would be nice to have an examples directory with a few examples showing variants of the widget. The codepen example could be moved here as a starting point and perhaps additional examples published to github pages.

It would be nice to have a filter prop to customize the day, month and year cell content and classes.

As introduction, you say the library "allows to edit even date's milliseconds." I don't see any example or any more mention about seconds nor milliseconds.

Can you provide me a code example?

Thank you in advance and good job

In updateSelectedDate function, the closeCalendar will run if I set "undefined" to value property.
It would be great if the closeCalendar can run based on closeOnSelect even if the value is set. So, I don't need to call closeCalendar manually.

[Edit]
Oops, sorry I just found that I should declare "open" property to force it close all the time.

I almost abandoned this add-on until I figured out how to get around an issue where a component state wasn't updating its month, day, or year state values which I had tied to the present selection of the datetime picker. I would have to select a given day/month/year twice in order for it to update the state appropriately; but strangely, not for the time selector, which updated the time state value immediately. The workaround in the code is to pass the moment object from one callback to another for the state to update. You can see an example in my code here in the CreateDeal class, specifically in the chooseDate and postDeal functions. Big thanks to @arqex for responding to my general inquiry regarding the matter when I was trying to figure it out.

I see a closed issue/request #45 for this feature.. i'm sure i'm not the only person that would be interested to see this feature added.

I'd be willing to contribute if you give me your guidelines to make a PR.

When you try to use this serverside (for example when doing an isomorphic app), you get an error ..

/node_modules\react-datetime\node_modules\classlist-polyfill\src\index.js:18
if ("document" in window.self) {
^
ReferenceError: window is not defined

I looked over the source and I am a bit confused why this is included? It appears not to be used at all (no reference to .classList) for any of the code in this particular library.

I see how to do formatting in the input field, but is there any way to customize the time picker? I want it to only go from 1-12 for the hour picker and add an AM/PM toggle button.

Hi, there is issue if I use equal week day names:

weekDayNames={["S", "M", "T", "W", "T", "F", "S"]}

Warning: flattenChildren(...): Encountered two children with the same key, .$T. Child keys must be unique; when two children share a key, only the first child will be used.
warning.js:48 Warning: flattenChildren(...): Encountered two children with the same key, .$S. Child keys must be unique; when two children share a key, only the first child will be used.
warning.js:48 Warning: flattenChildren(...): Encountered two children with the same key, .$T. Child keys must be unique; when two children share a key, only the first child will be used.
warning.js:48 Warning: flattenChildren(...): Encountered two children with the same key, .$S. Child keys must be unique; when two children share a key, only the first child will be used.

When the date picker is attached to an input the datepicker should close when selecting a date.

The picker will not be hide when I click the date on the picker. I need to click anywhere outside the picker to close the picker. How about adding a 'open' prop to control this?

If you have two Datetime components on a single page, then clicking outside of the the calendar for the second will not close it. You can easily reproduce this by using the linked demo codepen and changing the JavaScript code to the following:

React.render(
  <div>
    <Datetime />
    <Datetime />
  </div>,
  document.body
);

So while trying to figure out why this happened, I noticed that you just need to rebuild the dist files in order to fix this (i.e. npm run build is all it took me to fix this).

when i use react-datetime in form,
i wana reset the input value to empty after user click the reset button.

I set the component's value props to '',
but it's still have a date string in the input filed,
i can only reset it to empty if i set the state 'inputValue' to empty.
is there anyway i can only control the props to reset the value ?

futureDate(current) {
    let today = moment();
    return current.isAfter(today)
}

if i use this function as a validator, it will blur today's day, but it shouldn't.
The day should be available and only hours ans minutes in the future should be available

Is it possible to do this somehow?

Hi,

Now I am using this component in a form, and the date field is not mandetory. So I think it should be able to initialize the input as empty, so it won't confuse the users.
And when we delete the date in the input, it won't call the "onChange" callback. I think it should, because users want to delete the date field when this component is in a form.

I am having a small problem: if I show / hide the calendar using the open method, it will not overlap the existing content and will, instead, need extra vertical space, pushing the existing content down.

Do I need to force a specific class ???

Thanks in advance...

Stef

Hi,

It would be great if we could add children to the input element. That would allow us to add icons. For example, using Semantic UI I'd like to produce output like this:

<div class="ui left icon input">
  <i class="calendar icon"></i>
  <input type="text" placeholder="Enter tags">
</div>

I tried this:

<div className='ui left icon input'>
   <i className='calendar icon' />
   <DateTime
      timeFormat={false}
      isValidDate={this.validFromToday}
      inputProps={{ placeholder: T('datePlaceholder')}}
      onChange={(value) => this.handleChange('startDate', value)} />
</div>

But that doesn't work since you're wrapping the input.

Hello, is it possible to add support for React 0.14?

problem in package.json. "build": "gulp.cmd"
in Mac, ''build':"gulp" is ok.

Hi!

You might that react-datetime is still in process to be stable. It would be great to know developer's thoughts about the API.

From my point of view I have some doubts about the way of making it work as a datepicker/timepicker only. Currently if you pass prop dateFormat and not a timeFormat you only get the datepicker. The same happens in the other direction. But this way it is not possible to use the locale default format, so I was thinking about change it.

Also I was thinking about deprecating minDate and maxDate and creating a prop validDate that accepts a function to let the developer pick fine grained valid dates.

What do you think? Do you have other ideas or needs?

Please update dependency react-onclikoutside to version ^0.3.1.

Current package.json says "react-onclickoutside": "^0.2.4".
A fresh react-datetime install brings along react-onclikoutside v0.2.5 which seems to have a bug.

Upon picker load, browser console says "Uncaught ReferenceError: React is not defined" cause of this line: https://github.com/Pomax/react-onclickoutside/blob/a0f29a152806944702ddd014b2a0885c714f34c7/index.js#L59

In the demo, it's not possible to change the time using the selector.

Hi

I would like to keep the input field + click on it to open the picker, but I would like to disable the possibility for someone to actually type in that field.

Is that possible somehow?

All <button> tags do not specify a type attribute, which cause the page to be submitted if the picker is in a form tag and we change month using the arrows. Here is an exemple: http://codepen.io/anon/pen/EjeOJZ Using <button type="button"> would fix the issue, since button without type are considered as submit by default.

I can make a pull request to fix that issue in the following days.

How i could change the input to disabled ?

The date picker should close when the corresponding input field loses focus.

Just update to 2.0.0. The hover over cursor is 'text' but expect 'pointer'

Thanks for the wonderful lib, it's has the lightest footprint of the other libs I have explored.

I ran into the following error while trying to include it in my project:

~> npm install react-datetime --save
~> webpack --watch
# var Datetime = require('react-datetime');

ERROR in ./js/test.jsx
Module not found: Error: Cannot resolve module 'react-datetime' 

var ReactDOM = require('react-dom');

ReactDOM.render(
........
);

anyway, very cool application!
appreciate it!!!
thanks for all of you!

I would like to request a feature. The ability to only allow date or time on the picker, ie:

<DateTime
  mode='time'
/>

This would also set the viewMode to the same mode if passed.

The default mode would obviously be datetime with the options of date or time.

I'm glad to assist with contribution guidelines.

The mousedown event just trigger once by using the 0.3.3 version of react-onclickoutside.

I reinstall the 0.3.1 version fix the problem.

If timeFormat equals 'LT' we can go to timepicker tab, bul it is empty.

Hey,

notice the comment in the read me. so the reason you can't maintain this because you've moved on and have no time to maintain?

are you now using an alternative?

I've taken a local fork of this in my own project atm.

Version 1.2.1

Reproducible in Chrome 46, Firefox, IE10, IE11, Safari 8

Steps to reproduce:

• go to December (any year but for this example lets say 2015)
• click any of the dates past december (January 2016)

expected result: goes to January 2016
actual result: goes to November 2015