i need to make react-day picker component compatible with redux form. I know this is not absolutey right but redux form is manadatory for my current project. But i struggle to make it. I used react date picker which i made it compatible with this way:
import React from 'react';
import { PropTypes } from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { injectIntl, intlShape } from 'react-intl';
import 'react-datepicker/dist/react-datepicker.css';
const MyDatePicker = props => (
<div>
<DatePicker
{...props.input}
dateFormat="DD-MM-YYYY"
selected={props.input.value
? moment(props.input.value, 'DD-MM-YYYY')
: null}
placeholderText={props.placeholder}
disabled={props.disabled}
/>
{
props.meta.touched && props.meta.error &&
<span className="error">
{ props.intl.formatMessage({ id: props.meta.error }) }
</span>
}
</div>
);
MyDatePicker.propTypes = {
input: PropTypes.shape().isRequired,
placeholder: PropTypes.string,
disabled: PropTypes.bool,
meta: PropTypes.shape().isRequired,
intl: intlShape.isRequired
};
export default injectIntl(MyDatePicker);
but i struggle to make it with react day picker. Can anyone help me for achieving this?
I had a similar issue months back where the project called for redux forms and a date picker. The solution I came to was to wrap the date picker into it's own component and then wrap that component in another component, which then got used as a custom input component in redux forms.
I imagine you won't have to wrap as many times as I did but the concept should still be similar. Take a look at the code in this question as it shows an example of how to incorporate a date picker with redux-forms:
How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?
Related
Summary:
I've managed to apply the Thai locale for my Antd DatePicker but the year display is invalid. It has to be buddhist year (=christian year + 543) for a Thai locale.
(see the image at https://i.stack.imgur.com/336b7.jpg)
What I’ve tried:
I've read the API document on https://ant.design/components/date-picker/ but still have no idea how to modify the panel
Some code:
// App.js
import React from 'react'
import {DatePicker} from 'antd'
import 'moment/locale/th'
import locale from 'antd/lib/locale-provider/th_TH'
function App() {
return <DatePicker locale={locale}/>
}
export default App
I am trying to create a custom component combining Material UI Typography and Box Component. But I do see some compilation issues like if I use fontWeight property to Box component it automatically converts the styles, which is not happening in customization process. I have been to many blogs and everyone suggests not to have this approach, but there is a requirement for us to have a re-usable component which can supports multiple css attributes.
This is what I have tried:
import React, {FC} from 'react';
import {BoxProps, TypographyProps} from '#material-ui/core';
export type TypographyBoxProps = BoxProps & TypographyProps;
export const Typography: FC<TypographyBoxProps> = (props) => {
const {children, component: Component = 'p', ...rest} = props;
return <Component {...rest}>{children}</Component>;
};
This is how the above final compilation element looks like, which is incorrect, expectation is it should convert the font weight to actual css:
<h1 mb="3" font-weight="200" variant="h1" color="secondary">Hello Component!!!</h1>
I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.
You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";
I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).
you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";
I have already created a web app and I need to convert it into a react-native-ios app.
I have created a TextInput widget for the web app which does more than what the react-native TextInput componemt.
How could I overwrite core functionality of TextInput such as the onchange method.
How could I add extra functionality to the TextInput.
The web app's TextInput widget is written in JavaScript. I want to avoid objective-C, if at all possible.
Thanks.
If I understand correctly, there is nothing react-native specific you would need to do here. You just use standard react techniques for adding functionality to existing components. So you can create a component which wraps TextInput, which allows you to pass thought any prop TextInput accepts. And you can just as well provide additional props to your component for other requirements.
import * as React from 'react';
import {
TextInput
} from 'react-native';
class CustomInput extends React.Component {
constructor(props) {
this.state = {text: 'default text'}
}
render(): JSX.Element {
return (
<TextInput
{...this.props} // pass through props
value={this.state.text}
onChangeText={this.onChangeText} // update value as usual
onChange={this.props.doSomethingSpecial} // call custom prop function for custom behaviour
/>
);
}
onChangeText = (text) => {
this.setState({text});
}
}
export default CustomInput;
Here is the component:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
class DatePickerCreater extends Component {
constructor(props){
super(props);
}
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={Date(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)}
/>
);
}
}
export default DatePickerCreater
when i try to render it, it shows nothing...
Very grateful for every answer!
The selected property takes a moment.js date, not a plain javascript date. You should get an error that says "date.clone is not a function
". You can fix that by using a moment date:
import moment from 'moment';
class DatePickerCreater extends Component {
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={moment(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value, this.props.answer)}
/>
)
}
}
Also you may have forgotten to import the react-datepicker css file. Without that the popup will not show correctly:
import 'react-datepicker/dist/react-datepicker.css';
EDIT
Since they switched to using date-fns this answer is outdated. If you are using react-date-picker with a version >=2.0 you can no longer pass a moment.js instance. Instead use native Date objects and manipulate them using date-fns.
For Reference:
Up until version 1.8.0, this package was using Moment.js. Starting
v2.0.0, we switched to using date-fns, which uses native Date objects,
to reduce the size of the package. If you're switching from 1.8.0 to
2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
The code is not enough, what can I tell super() need to be called with props:
constructor(props){
super(props);
// ... code
}