J'utilise andd ( https://ant.design/ ) pour le projet, andd fonctionne bien Avec d'autres composants, alors que je suis confronté à un problème lors de l'utilisation de DatePicker ( https://ant.design/components/date -Picker / ). DatePicker utilise un moment ( https://momentjs.com/ )
dans un formulaire initialement, je veux tout le Champs avec un espace réservé et une fois que l'utilisateur remplit le formulaire, il lui sera affiché. Une fois que l'utilisateur ajouté peut modifier leurs données. P>
paramètres de données fonctionne bien mais je ne parviens pas à définir le champ de date initialement aussi vide afin que je puisse montrer à l'utilisateur un champ avec un espace réservé P>
Je définis le champ de date comme p> où, comme lorsque j'obtiens l'utilisateur sélectionné lors de la définition de la date qui fonctionne parfaitement bien. P> initialValue: moment(userSelectedDate) => user selected date
3 Réponses :
faire une valeur initiale dans état code> comme non défini code> et attribuer une valeur initiale à defaultValue code> Prop de DatePicker code>.
Essayez le code suivant: import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { DatePicker } from 'antd';
const dateFormat = 'YYYY/MM/DD';
const initialValue=undefined; // this initial value should be in state
ReactDOM.render(
<div>
<Form.Item >
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
initialValue:initialValue
})(
<DatePicker
placeholder="please add date"
format={dateFormat}
/>
)}
</Form.Item>
<br />
</div>,
document.getElementById('container'),
);
const getDateFormat = date => {
var d = moment(date);
return date && d.isValid() ? d : '';
};
In your input tag value={getDateFormat(value)}
Cela a fonctionné pour moi.
<Space direction="horizontal">
<DatePicker
value={formik.values.next_reminder_date
? moment(formik.values.next_reminder_date) : undefined}
placeholder="Next Reminder Date"
name="next_reminder_date"
onChange={(date) => {
const isoDate = date?.toISOString();
formik.setFieldValue('next_reminder_date', isoDate);
}}
/>
</Space>
Avez-vous essayé de ne pas fournir le
initialvalue accessoire?J'utilise AdmallValue Prop pour définir les données, si j'ai supprimé cela, cela fonctionne ensuite bien, mais je ne parviens pas à définir la date de l'utilisateur tout en affichant le formulaire de modification @ ghostbbbmt-msp
Si vous souhaitez définir la valeur initiale, ne fournit pas le
initialvalue accessoireJe gère la forme initiale et modifier la forme dans le même formulaire si je n'utilise pas d'initialvalue ProP, alors je ne pourrai pas définir les données tout en affichant le formulaire d'édition
Postez une démo dans un bac à sable ... Le problème est avec la manière dont vous gérez la forme.
@Wasif vous pouvez utiliser l'état comme
sélectionnédate et définirinitialvalue = this.state.stateddate . Essayez de définir la valeur init desélectionnédate estnon défini