如何在 React material-ui 日期选择器中格式化日期? [英] How to format date in React material-ui date-picker?
问题描述
我正在使用 material-ui 日期选择器字段实现 redux-form.日期在字段中完美设置,但是当我尝试将其发送到后端 API 格式时,日期是:
BeginDate_1:2017 年 11 月 14 日星期二 15:03:43 GMT+0530 (IST)
我正在尝试将此格式更改为YYYY-mm-dd"格式,然后再将其发送到后端 API.
我尝试了 momentjs
格式化,但我无法得到我想要的结果.
这是我尝试过的:
Home.js
import React, {Component} from 'react';从redux-form"导入 {Field, reduxForm};从'material-ui/DatePicker'导入DatePicker;从'react-redux'导入{connect};从时刻"导入 * 作为时刻;类 Home 扩展组件 {renderCalendarField= ({输入,标签,元:{触摸,错误},孩子们,...风俗}) =>(<日期选择器浮动标签文本={标签}errorText={touched &&错误}{...输入}value = {input.value !== ''?新日期(输入值):空}onChange={(event, value) =>input.onChange(value)}儿童={儿童}{...风俗}格式日期={(日期)=>时刻(日期).格式('YYYY-MM-DD')}/>)使成为() {const startDate = 新日期();const {handleSubmit} = this.props;返回 (<form onSubmit={handleSubmit(this.onSubmit.bind(this))}><div><Field name="BeginDate_1" component={this.renderCalendarField} label="DEPARTURE" minDate={startDate}/>
<div><按钮类型=提交">提交按钮>
</表单>);}}const LogInForm = reduxForm({form: 'MaterialUiForm',//此表单的唯一标识符证实})(家);导出默认连接(mapStateTOProps, {getCity})(LogInForm);
控制台输出仍然是:
BeginDate_1:2017 年 11 月 14 日星期二 15:03:43 GMT+0530 (IST)
如何以YYYY-mm-dd
格式格式化这个日期?
formatDate
在 DatePicker
上的道具用于 format
>Display Date
而不是实际值.您需要做的是,使用 moment
onSubmit
函数中的值onSubmit(值){const beginDate = moment(values.BeginDate_1).format('YYYY-MM-DD')控制台日志(开始日期);//其他事情}
<块引用>formatDate:函数
调用这个函数来格式化输入中显示的日期字段,并且应该返回一个字符串.默认情况下,如果没有语言环境和DateTimeFormat 提供日期对象的格式为 ISO 8601 YYYY-MM-DD.
签名:
function(date: object) =>任何date:要格式化的日期对象.返回(任何):格式化的日期.
I'm implementing redux-form with a material-ui date-picker field. Date is perfectly set in field but when I try to send it to the back-end API format of the date is:
BeginDate_1: Tue Nov 14 2017 15:03:43 GMT+0530 (IST)
I'm trying to change this format to 'YYYY-mm-dd' format before sending it to the the back-end API.
I tried momentjs
for formatting, but I couldn't get the result I wanted.
Here's what I've tried:
Home.js
import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import DatePicker from 'material-ui/DatePicker';
import {connect} from 'react-redux';
import * as moment from 'moment';
class Home extends Component {
renderCalendarField= ({
input,
label,
meta: {touched, error},
children,
...custom
}) => (
<DatePicker
floatingLabelText={label}
errorText={touched && error}
{...input}
value = {input.value !== ''? new Date(input.value) : null}
onChange={(event, value) => input.onChange(value)}
children={children}
{...custom}
formatDate={(date) => moment(date).format('YYYY-MM-DD')}
/>
)
render() {
const startDate = new Date();
const {handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<div>
<Field name="BeginDate_1" component={this.renderCalendarField} label="DEPARTURE" minDate={startDate} />
</div>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
);
}
}
const LogInForm = reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate
})(Home);
export default connect(mapStateTOProps, {getCity})(LogInForm);
The console output is still:
BeginDate_1:Tue Nov 14 2017 15:03:43 GMT+0530 (IST)
How can I format this date in YYYY-mm-dd
format?
formatDate
prop on the DatePicker
is used to format
the Display Date
and not the actual value. What you need to do is, format the the value in the onSubmit
function using moment
onSubmit (values) {
const beginDate = moment(values.BeginDate_1).format('YYYY-MM-DD')
console.log(beginDate);
//other things
}
According to the material-ui/DatePicker docs:
formatDate: function
This function is called to format the date displayed in the input field, and should return a string. By default if no locale and DateTimeFormat is provided date objects are formatted to
ISO 8601 YYYY-MM-DD.
Signature:
function(date: object) => any date: Date object to be formatted. returns (any): The formatted date.
这篇关于如何在 React material-ui 日期选择器中格式化日期?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!