Topic: DatePicker Issue

jomelnerveza free asked 5 years ago


Expected behavior

Actual behavior arning: Failed prop type: Invalid prop TextFieldComponent supplied to DateTextField. in DateTextField (created by Context.Consumer) in WithUtils(DateTextField) (created by ModalWrapper) in ModalWrapper (created by BasePicker) in BasePicker (created by Context.Consumer) in WithUtils(BasePicker) (created by DatePickerModal) in DatePickerModal (created by ForwardRef) in ForwardRef (created by DatePicker) in MuiPickersUtilsProvider (created by DatePicker) in MuiThemeProviderOld (created by DatePicker) in div (created by DatePicker) in DatePicker (at PersonalInformation.jsx:297) in div (created by Col) in Col (at PersonalInformation.jsx:295) in div (created by Row) in Row (at PersonalInformation.jsx:294) in form (at PersonalInformation.jsx:191) in div (created by Col) in Col (at PersonalInformation.jsx:189) in div (created by Row) in Row (at PersonalInformation.jsx:188) in PersonalInformation (at LayoutPDS.jsx:47) in div (created by TabPane) in TabPane (at LayoutPDS.jsx:46) in ShowTab (at LayoutPDS.jsx:217) in div (created by TabContent) in TabContent (at LayoutPDS.jsx:213) in div (created by Container) in Container (at LayoutPDS.jsx:208) in LayoutPDS (at AppForms.js:227) Resources (screenshots, code snippets etc.) import React, { useState,useEffect } from 'react'

import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardHeader, MDBCardBody, MDBInput, MDBBtn,MDBSelect,MDBDatePicker } from 'mdbreact';

import PaddingTop from './PaddingTop'; import NavBarPage from './NavBarPage'; import Axios from 'axios';

const PersonalInformation=(props)=>{

const [frm, setValues] = useState({
    EmployeeNo: '',
    LastName: '',
    FirstName: '',
    MiddleName: '',
    NameExtenstion: '',
    BirthDate: new Date()


  });



 const getDateValue = dtPickerName =>(actualValue)=>{

    // alert(dateValue + " " + actualValue);
    setValues({ ...frm, [dtPickerName]: actualValue });
    console.log(actualValue);
 } 


useEffect(()=>{

   loadSexOptions();
   loadCivilStatusOptions();
    loadPersonalInfo();


  },[sessionStorage.getItem("EmployeeCode")]);

return (
    <React.Fragment>


        <MDBRow>
            <MDBCol md="10">

                <form
                className="needs-validation"
                onSubmit={submitHandler}
                noValidate
                >
                 <MDBRow>
                    <MDBCol md="10">
                        <br/>
                        <h3><b>Personal Information</b></h3>
                    </MDBCol>

                </MDBRow>

                <MDBRow>
                    <MDBCol md="10">
                    {/* <MDBDatePicker value={frm.BirthDate} getValue={getDateValue("BirthDate")} /> */}
                    <MDBDatePicker clearable valueDefault={null} emptyLabel="Select Date" getValue={getDateValue("BirthDate")} />

                    </MDBCol>
                </MDBRow>




                <MDBBtn color="success" type="submit">
                    Save
                </MDBBtn>
                </form>

            </MDBCol>
        </MDBRow>


    </React.Fragment>
);

} export default PersonalInformation


Aliaksandr Andrasiuk staff answered 5 years ago


Hi,

Unfortunately can't reproduce the problem due to lack of code.

I've copied your code but without useEffect hook and submitHandler method functionality and it works well.

What version of the mdbreact do you use?

Can you show me the full code?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.17.0
  • Device: PC and Mobile
  • Browser: Chrome and Mozilla
  • OS: windows
  • Provided sample code: Yes
  • Provided link: No