react-datepicker

Change locale in react-datepicker

廉价感情. 提交于 2020-11-30 10:35:40
问题 I am using react-datepicker NPM package, I tried to follow documentation but I was unable to import registerLocale and setDefaultLocale from react-datepicker Do you see where I make mistake? import DatePicker from 'react-datepicker'; ... <DatePicker { ...this.props } dateFormat={ this.dateFormat } ref={ (node) => { this.ref = node; } } onClickOutside={ this.clickOutside } /> ... this is code where I want to import locale. 回答1: First of all make sure you are using the latest version of the

Change locale in react-datepicker

孤者浪人 提交于 2020-11-30 10:29:10
问题 I am using react-datepicker NPM package, I tried to follow documentation but I was unable to import registerLocale and setDefaultLocale from react-datepicker Do you see where I make mistake? import DatePicker from 'react-datepicker'; ... <DatePicker { ...this.props } dateFormat={ this.dateFormat } ref={ (node) => { this.ref = node; } } onClickOutside={ this.clickOutside } /> ... this is code where I want to import locale. 回答1: First of all make sure you are using the latest version of the

Modifying the tooltip in react-big-calendar

这一生的挚爱 提交于 2020-08-10 18:59:31
问题 How to modify the tooltip that appears when you hover over an event? I would like to include more information (start date, end date, id, buttons(edit, delete). I tried: function Event({ event }) { return ( <span> <strong>{event.title}</strong> {event.desc && ': ' + event.desc} </span> ) } <Calendar events={events} localizer={localizer} defaultDate={new Date(2015, 3, 1)} components={{ event: Event }} /> but this only changes the event and not the tooltip that appears when you hover over the

React-datepicker with a Formik form

怎甘沉沦 提交于 2020-07-04 08:42:42
问题 I'm trying to use react-datepicker in a Formik form. I have: import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Fuate extends React.Component { state = { dueDate: new Date() } <Formik initialValues={initialValues} validationSchema={Yup.object().shape({ title: Yup.string().required("A title is required "), })} onSubmit={this.handleSubmit} render={({ errors, status, touched, setFieldValue, setFieldTouched, handleChange, handleBlur, handleSubmit

Is it possible to use react-datepicker with react hooks forms?

时光怂恿深爱的人放手 提交于 2020-06-15 04:26:08
问题 Is it possible to use react-datepicker with react hooks forms? I tried following sample: https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark But with no luck. import React, { useState } from "react"; import "./styles.css"; import { useForm } from "react-hook-form"; import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap"; import DatePicker from "react-datepicker"; export default function App() { const { register, handleSubmit } = useForm();

Calling a function when the datepicker closes, when I click only outside of the datepicker

妖精的绣舞 提交于 2020-04-16 04:24:29
问题 Is it possible to set the datepicker to close only when I click outside the datepicker? When closing the calendar, if the date was selected, the alertDate function was called? Code here: https://stackblitz.com/edit/react-o8dm7y class App extends Component { constructor() { super(); this.state = { selectedDate: '', arrayDates: [] }; } handleChangeDate = (date) => { let newArrayDates = [...this.state.arrayDates] newArrayDates.push(date) this.setState({ selectedDate: date, arrayDates:

React js multiple instances of date picker

与世无争的帅哥 提交于 2020-03-16 08:34:08
问题 I am having problem updating the date on react-datepicker if I use multiple instances of datepicker. Date picker Component: <DatePicker selected={this.state.from} onChange={this.changeDate.bind(this)} /> On change handler: changeDate(date) { this.setState({ from : date }); } This seems to work fine if i am using only one instance, but when I add more than one instances, I have to create separate onchange handler for each of the newly created date picker component. What I am looking for is a

React Datepicker with redux-form

我们两清 提交于 2020-01-13 07:15:34
问题 How to make the react-datepicker bind with redux-form? I have this redux-form field: <Field name="due_date" component={props => <DatePicker {...props} readOnly={true} selected={this.state.due_date} value={this.state.due_date} onChange={this.handleDueDate} /> } /> Whenever i submit the redux form does return an empty object not binding the datepicker's value... my onChange : handleDueDate(date) { this.setState({ due_date: moment(date).format('L') }, () => { // do I need to dispatch and action

Hide native keyboard on mobile when using react-date-picker

倖福魔咒の 提交于 2019-12-19 04:32:32
问题 I'm using react-date-picker, but on mobile the native keyboard shows up when clicked causing the date-picker to open on top, which doesn't look great. The online solution is to put the readonly attribute on the input field the date picker is bind with. But the read-date-picker component won't let me pass that prop... Any nice solutions for this? 回答1: So I ended up modifying the input-element in the componentDidMount lifecycle, like so; document.getElementsByTagName("input")[0].setAttribute(