Git Product home page Git Product logo

Comments (6)

Sparragus avatar Sparragus commented on June 10, 2024 2

How did you end up doing it? I know onChange will let you get the value but I would like to do it using refs.

from react-datetime.

arqex avatar arqex commented on June 10, 2024 1

Hey!

I think this is an usual problem for developers starting using react, don't know if this is your case.

Input type of components are usually used in a controlled way, so we set the prop value with some date that we store and keep track of it.

Then when the value changes, we need to update the value of our variable, and that will be given again to the datepicker. So we always have the value stored by ourselves.

See react docs: https://reactjs.org/docs/forms.html#controlled-components

In case you don't like controlled components (that you should if you are using react) you can use it in a uncontrolled way using defaultValue and you can listen to changes using onChange. The problem is that you won't be able to update the value programmatically that way. You are just a listener.

https://reactjs.org/docs/uncontrolled-components.html

In case you don't like any of those alternatives, you can access to the internal state of the component's instance using refs. Totally discouraged, because internals can change at any time without any advice breaking your application completely. If we don't care about it and want to use the component in a way it was never thought of, it's possible to access to the internal value using:

// in the render method
<Datetime ref={ instance => this.picker = instance  }/>

// anywhere else in the component
let date = this.picker.state.selectedValue

from react-datetime.

EwanValentine avatar EwanValentine commented on June 10, 2024

Ignore this, I was being stupid.

from react-datetime.

GuiRitter avatar GuiRitter commented on June 10, 2024

Still no docs. I must be stupid too...

I don't think onChange is the solution 'cause I also want to clear the selected value.

from react-datetime.

GuiRitter avatar GuiRitter commented on June 10, 2024

I kind of figured out that I had to use it in a controlled manner by searching a little more.

Still, README.md should explain clearly that this is supposed to be used like that. There's no explanation or example anywhere about anything related to reading the value.

from react-datetime.

jai1331 avatar jai1331 commented on June 10, 2024

@arqex It's a nice plug in but It would be better if you put how to get Datetime component value when onChange and how to set initial value

from react-datetime.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.