Material Ui KeyboardDatepicker - The month shows invalid value - material-ui

Question

I am trying to implement KeyboardDatepicker inside ag grid's cell editor. When I select a date from the datepicker popup, the month value is shown incorrectly. The date I have selected is 30-04-2020 and the date it is showing is 30-30-2020. I tried using formatDate attribute to format the date as well. I am passing the selected value in proper format but the date is showing incorrectly. I am using date-io/moment version 1.3.13 and date-io/date-fns version 0.0.2. Anybody faced this issue before? I am sure this is a trivial issue and I am missing something. Any pointers would be much appreciated. Thanks in advance. Cheers!
Update:
Datepicker_component_grid.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '#material-ui/pickers';
import DateFnsUtils from '#date-io/date-fns'
import moment from 'moment'
import format from 'date-fns/format'
import Grid from '#material-ui/core/Grid'
import { SampleDatePickerWithUtils } from '../Sample_datepicker_with_utils';
export class DateEditor extends Component {
constructor(props) {
super(props)
this.onDateChange = this.onDateChange.bind(this)
this.state = {
value: null
}
}
componentDidMount() {
}
componentWillUnmount() {
}
componentDidUpdate() {
this.focus()
}
focus() {
window.setTimeout(() => {
let dateContainer = ReactDOM.findDOMNode(this.refs.dateContainer)
if (dateContainer) {
dateContainer.focus()
}
})
}
getValue() {
return this.state.value
}
isPopup() {
return false
}
onDateChange(date) {
this.setState({
value: date
},
() => this.props.api.stopEditing()
)
}
render() {
let storeValue = this.props.value
return (
<span
ref='dateContainer'
tabIndex={1}>
<SampleDatePickerWithUtils labelName={' '} schemaLocation='rowDate' isDisabled={false}
displayFormat='yyyy-mm-dd'
disableFuture={false}
onDateChange={this.onDateChange}
disablePast={false}
storeVal={storeValue}
gridSize={{ sm: 2, md: 1, lg: 1 }}></SampleDatePickerWithUtils>
</span>
)
}
}
SampleDatePickerWithUtils.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles'
import { updateFieldState, onTabOut, updateFocus } from 'actions/ticket_actions';
import { bindActionCreators } from 'redux';
import { getGridSizing } from 'styles/Sample_core_theme';
import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '#material-ui/pickers';
import { formatToYMD } from 'core/schema_translators/utils';
import EventIcon from '#material-ui/icons/Event';
import DateFnsUtils from '#date-io/date-fns'
import { SampleFieldComponent } from './base_components';
import { registerComponent } from 'actions/Sample_core_actions';
import { connect } from 'react-redux';
const moment = require('moment');
class MyDateFnsUtils extends DateFnsUtils {
startOfMonth(date) {
let dat = moment(date).startOf('month').toDate()
return dat
}
}
class _SampleDatePickerWithUtils extends SampleFieldComponent {
constructor(props) {
super(props);
let formattedDate = props.storeVal ? formatToYMD(props.storeVal) : null
this.state = {
value: formattedDate,
errorMsg: '',
isError: false,
}
this.styleProps = { disableUnderline: true }
this.inputLabelProps = { shrink: true }
this.onChangeCallback = this.onChangeCallback.bind(this)
// this.onBlurCallback = this.onBlurCallback.bind(this)
props.registerComponent(props.schemaLocation)
}
componentWillMount() {
this.props.registerComponent(this.props.schemaLocation)
if (this.props.manageValueManually) {
let dateValue = this.props.overriddenValue ? formatToYMD(this.props.overriddenValue) : null
this.props.updateFieldState(this.props.schemaLocation, dateValue)
}
}
componentDidMount() {
if (this.props.focusField) { this.focusDomElement() }
}
componentWillReceiveProps(nextProps) {
if (this.props.manageValueManually) {
if (nextProps.overriddenValue !== this.props.overriddenValue) {
let dateValue = nextProps.overriddenValue ? formatToYMD(nextProps.overriddenValue) : null
this.props.updateFieldState(this.props.schemaLocation, dateValue)
this.props.onTabOut(this.props.schemaLocation)
}
}
}
onChangeCallback(date) {
let formattedDate = date ? formatToYMD(date) : null
if (!this.props.manageValueManually) {
this.props.updateFieldState(this.props.schemaLocation, formattedDate)
this.props.onTabOut(this.props.schemaLocation) //this is required because the value is selected in a date picker
}
this.props.onDateChange(formattedDate)
}
render() {
const gridSizing = getGridSizing(this.props)
const { classes } = this.props
return (
<MuiPickersUtilsProvider utils={MyDateFnsUtils}>
<KeyboardDatePicker
keyboard={(!this.props.isDisabled).toString()}
keyboardIcon={<EventIcon style={{ fontSize: '22px', color: 'red' }} />}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
InputProps={{ className: classes.inputProps }}
label={this.props.labelName === '' ? this.props.schemaLocation : this.props.labelName}
value='2020-04-30'
onChange={this.onChangeCallback}
// format={this.props.displayFormat}
format='yyyy-mm-dd'
onBlur={this.onBlurCallback}
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
</MuiPickersUtilsProvider>
);
}
}
const styles = (theme) => ({
inputProps: {
marginTop: '0px !important',
// fontSize: '14px',
border: 0,
'& input': {
fontSize: '14px',
'&:focus': {
boxSizing: 'content-box'
}
}
}
})
const SampleDatePickerWithUtils = withStyles(styles)(_SampleDatePickerWithUtils)
export { SampleDatePickerWithUtils }

Answer 1

Using KeyboardDatePicker with moment the format I use is
format = {moment.localeData().longDateFormat('L')} // In my case dd/mm/yyyy
If you want to use a different locale you can require it first and use it
require("moment/locale/en-us");
moment().locale("en-us");
format = {moment().locale(locale).localeData().longDateFormat('L')}
For the value I use moment date when the date has a value and null otherwise
value={date ? moment(date) : null}
and for the onChange I'm using universal format as I don't want to store it in locale format
{(date: any) => handleChange(path, date?.format('YYYY-MM-DD'))}