Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: date-picker design problem ?

Group free asked 5 years ago


Hi,

problem 1: I am facing problem with MDBDatePicker design . When I say doc there is different design, but when I see my premium theme different MDBDatePicker design. problem 2: this.state = { pickerValue: "", }; getValueOfDatePicker = pickerDate => { this.setState({ pickerValue: pickerDate }); console.log(pickerDate); }; problem 2 : Initially , Date is defined For example :" 25-03-2019" when I submit my data , not selecting the datepicker I see empty string . but I need to show default date in my state . how can i do this


Anna Morawska staff answered 5 years ago


Hi there, if you want to set a an initial value, you need to turn the string into the instance of the Date prototype. Try the code shown below:

import React, { Component } from "react";
import { MDBDatePicker, MDBContainer, MDBBtn } from "mdbreact";

class DatePickerPage extends Component {
  state = {
    date: new Date('03.25.1992')
  }

  updateStateValue = value => this.setState({ date: value });

  setDate = date => this.setState({ date: new Date(date) })

  render() {
    return (
      <MDBContainer>

        <div className="d-flex align-items-center">
          <MDBDatePicker value={this.state.date ? this.state.date : undefined} getValue={this.updateStateValue} />
          <MDBBtn onClick={() => this.setDate("10.20.2020")} size="sm" className="ml-4">Set Date "10.20.2020"</MDBBtn>
        </div>
      </MDBContainer>
    );
  }
}

export default DatePickerPage;


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.11.1
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No