Topic: adding clickable calendar icon in date picker.

viswanathm free asked 5 years ago


I want to add a calendar icon in react date picker. When user will click on icon, the calendar will pop out. Also, I want to display today's date button on the calendar.


musme free commented 5 years ago

Yes, I want too! Also, I want to add a clickable "show password" icon in Material Text Input.


Konrad Stępień staff commented 5 years ago

@musme

Do you mean to add an option to MDBInput to display theshow password button near the Input element? If you want this option, we can add it in the future.

Best, Konrad.


musme free answered 5 years ago


@Konrad Stępień, I want to use something like this:

<MDBInput label="Username" icon="user" IconOnClick={this.props.togglePassword}/>

IconOnClick={any passed function}


Konrad Stępień staff commented 5 years ago

Here you can go to API and check all props for MDBInput, for now, it is not possible to set an event for the icon, but you can use MDBInput without icon and MDBIcon with function for onClick. We also can add these props for feature if you want.


musme free commented 5 years ago

Yes, please! Thanks!


Konrad Stępień staff commented 5 years ago

Ok, thanks to you for suggestions. We will deal with this in the near future. Best, Konrad


Konrad Stępień staff answered 5 years ago


Hello @viswanathm and @musme,

Are you interested in something like this?

enter image description here

My code

import React from "react";
import { MDBDatePicker } from "mdbreact";

function DatePicker(props) {
  return (
      <MDBDatePicker
        keyboard
        value={new Date()}
      />
  );
}

export default DatePicker;

Your regards, Konrad.


musme free commented 5 years ago

Thanks, @Konrad Stępień What about "show password" icon in Material Text Input?


Konrad Stępień staff commented 5 years ago

Answer above. We can create such an option available for MDBInput, but currently, there is no way to show such a button via MDBInput. It is possible to add your own element with the condition to the aforementioned component, with the appropriate states. For example

import React from "react";
import { MDBInput } from "mdbreact";

class Inp extends React.Component {
  state = {
    type: "password"
  };
  showPassword = () => {
    this.setState({ type: "text" });
  };
  hidePassword = () => {
    this.setState({ type: "password" });
  };
  render() {
    return (
      <MDBInput type={this.state.type}>
        <span onMouseEnter={this.showPassword} onMouseLeave={this.hidePassword}>
          Show passowrd
        </span>
      </MDBInput>
    );
  }
}

export default Inp;


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