Properly updating MDBDatePIcker CSS Styles


Topic: Properly updating MDBDatePIcker CSS Styles

mattknapp pro asked 6 years ago

Hello, My question is fairly simple. What is the proper way to update the color scheme of the MDBDatePicker Component in React? The documentation does not contain any pointers for this. The component generates its own classes that are slightly changed each time they render. How do I properly target the modal that pops up when the datepicker is selected in order to change the style of the component to meet specific needs? Below is my code and a link to current docs.  
<MDBDatePicker style={{ width: '100%', color: '#0e9aa7' }} value={this.props.dashboard.ops.apiDate}

            getValue={this.getValue} id='Opscalendar' format='DD MMMM, YYYY'

            />
  Docs Thanks,

Jakub Mandra staff premium answered 6 years ago

Hi there, Because DatePicker is pretty to complex and we are currently working on rebuild, it is not mentioned in docuemntation, that you con use theme prop to add your custm styles. Here is a little snippet for you:
import React from 'react';

import { MDBDatePicker, Container } from 'mdbreact';

const theme = {

  overrides: {

    MuiPickersToolbar: {

      toolbar: {

        backgroundColor: 'black',

      },

    },

    MuiPickersCalendarHeader: {

      switchHeader: {

        // backgroundColor: 'blue',

        // color: 'blue',

      },

    },

    MuiPickersDay: {

      day: {

        color: 'green',

      },

      selected: {

        backgroundColor: 'blue',

      },

      current: {

        color: 'blue',

      },

    },

    MuiPickersModal: {

      dialogAction: {

        color: 'blue',

      },

    },

  },

}

class DatePickerPage extends React.Component  {

  getPickerValue = (value) => {

    console.log(value);

  }

  render() {

    return(

      <Container className="mt-5">

        <MDBDatePicker getValue={this.getPickerValue} theme={theme} />

      </Container>

    );

  }

};

export default DatePickerPage;
 

mattknapp pro answered 6 years ago

Thank you for your response it worked! For anyone else interested in fixing this before the MDB rebuild check out the link for advanced classes such as :hover Docs  
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: All
  • Browser: Major
  • OS: Mac
  • Provided sample code: No
  • Provided link: Yes