如何在 React material-ui 日期选择器中格式化日期? [英] How to format date in React material-ui date-picker?

查看:26
本文介绍了如何在 React material-ui 日期选择器中格式化日期?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 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格式格式化这个日期?

解决方案

formatDateDatePicker 上的道具用于 format >Display Date 而不是实际值.您需要做的是,使用 moment

格式化 onSubmit 函数中的值

onSubmit(值){const beginDate = moment(values.BeginDate_1).format('YYYY-MM-DD')控制台日志(开始日期);//其他事情}

根据 material-ui/DatePicker 文档:

<块引用>

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屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆