Is it possible to manipulate Ant Design Range Picker data before send it?
Question
I have the following form using Ant Design Range Picker component:
<Form layout='inline' onSubmit={(e) => this.handleSubmit(e)}>
<Form.Item>
<RangePicker name='rangeDate' />
</Form.Item>
<Form.Item>
<Input name='channel' placeholder='Type a channel' />
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit' >
{this.props.buttonLabel}
</Button>
</Form.Item>
</Form>
When the form is submitted, the answer I'm getting is this:
{
"channel": "Testing",
"rangeDate": [
{
"_isAMomentObject": true,
"_isUTC": false,
"_pf": {
"empty": false,
"unusedTokens": [],
"unusedInput": [],
"overflow": -2,
"charsLeftOver": 0,
"nullInput": false,
"invalidMonth": null,
"invalidFormat": false,
"userInvalidated": false,
"iso": false,
"parsedDateParts": [],
"meridiem": null,
"rfc2822": false,
"weekdayMismatch": false
},
"_locale": {
"_calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"_longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"_invalidDate": "Invalid date",
"_dayOfMonthOrdinalParse": {},
"_relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"_months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"_monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"_week": {
"dow": 0,
"doy": 6
},
"_weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"_weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"_weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"_meridiemParse": {},
"_abbr": "en",
"_config": {
"calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"invalidDate": "Invalid date",
"dayOfMonthOrdinalParse": {},
"relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"week": {
"dow": 0,
"doy": 6
},
"weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"meridiemParse": {},
"abbr": "en"
},
"_dayOfMonthOrdinalParseLenient": {}
},
"_d": "2018-08-06T15:20:10.948Z",
"_isValid": true
},
{
"_isAMomentObject": true,
"_isUTC": false,
"_pf": {
"empty": false,
"unusedTokens": [],
"unusedInput": [],
"overflow": -2,
"charsLeftOver": 0,
"nullInput": false,
"invalidMonth": null,
"invalidFormat": false,
"userInvalidated": false,
"iso": false,
"parsedDateParts": [],
"meridiem": null,
"rfc2822": false,
"weekdayMismatch": false
},
"_locale": {
"_calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"_longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"_invalidDate": "Invalid date",
"_dayOfMonthOrdinalParse": {},
"_relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"_months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"_monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"_week": {
"dow": 0,
"doy": 6
},
"_weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"_weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"_weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"_meridiemParse": {},
"_abbr": "en",
"_config": {
"calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"invalidDate": "Invalid date",
"dayOfMonthOrdinalParse": {},
"relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"week": {
"dow": 0,
"doy": 6
},
"weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"meridiemParse": {},
"abbr": "en"
},
"_dayOfMonthOrdinalParseLenient": {}
},
"_d": "2018-08-23T15:20:10.948Z",
"_isValid": true
}
]
}
So, how can I manipulate this result to change it the way I need? I would like to be able to convert this result into something like this:
{
"channel": "Testing",
"rangeDate": ["2018-01-01", "2018-01-10"]
}
I'm creating my forms dynamically because the application will have several forms. My example config to create a form:
const fields = [
{
name: 'rangeDate',
errorMessage: 'Please fill the dates',
required: true,
field: <RangePicker format='YYYY-MM-DD' onChange={ (date, dateString) => console.log(date, dateString) } />
},
{
name: 'channel',
errorMessage: 'Please fill the channel',
required: true,
field: <Input placeholder='Channel' />
}
];
And with the fields variable above, I can create my form using just a for to iterate:
getFields () {
const formItems = [],
{ getFieldDecorator } = this.props.form;
for(let i = 0; i < fields.length; i++) {
const formItem = fields[i];
formItems.push(
<FormItem key={i}>
{
getFieldDecorator(formItem.name, {
rules: [{
required: formItem.required,
message: formItem.errorMessage
}]
})(
formItem.field
)
}
</FormItem>
);
}
return formItems;
}
Thanks!
1 answers
solution1
1 ACCPTED 2018-08-21 17:37:21
You need to format your rangedate before submit, Hope this sample of code solves your problem.
I have replicated exactly your code, Just check logic inside handle submit function and make those changes to your code accordingly.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, DatePicker, TimePicker, Button, Input } from 'antd';
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;
class TimeRelatedForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
// Should format date value before submit.
const rangeValue = fieldsValue['rangeDate'];
const values = {
...fieldsValue,
'rangeDate': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
};
console.log('Received values of form: ', values);
});
}
getFields() {
const fields = [
{
name: 'rangeDate',
errorMessage: 'Please fill the dates',
required: true,
field: <RangePicker format='YYYY-MM-DD' onChange={(date, dateString) => console.log(date, dateString)} />
},
{
name: 'channel',
errorMessage: 'Please fill the channel',
required: true,
field: <Input placeholder='Channel' />
}
];
const formItems = [],
{ getFieldDecorator } = this.props.form;
for (let i = 0; i < fields.length; i++) {
const formItem = fields[i];
formItems.push(
<FormItem key={i}>
{
getFieldDecorator(formItem.name, {
rules: [{
required: formItem.required,
message: formItem.errorMessage
}]
})(
formItem.field
)
}
</FormItem>
);
}
return formItems;
}
render() {
return (
<div>
<Form onSubmit={this.handleSubmit}>
{this.getFields()}
<FormItem
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}}
>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
</div>
);
}
}
const WrappedTimeRelatedForm = Form.create()(TimeRelatedForm);
ReactDOM.render(<WrappedTimeRelatedForm />, document.getElementById('container'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ant Design range picker disable array of dates
Ant Design Range Picker not updating date when state updates
Manipulate json data to fit in tree data table in ant design
Ant Design range picker - how can i disable arrow of future (next) months?
ReactJS Ant Design - Use Range Picker as Multi Month View with Single date selection
Ant Design Table - Filtering by Date Range
Ant Design - Upload file into memory before posting
Is it possible to manipulate an element before inserting it into the DOM with jquery?
Date range picker send selected date with AJAX
Is it possible to customize the years range in bootstrap date picker
Related Tags