adding clickable calendar icon in date picker.

web
mobile

Topic: adding clickable calendar icon in date picker.

viswanathm pro premium asked 11 months 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 pro premium commented 11 months ago

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


Konrad Stępień staff commented 11 months 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.


Konrad Stępień staff answered 11 months 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 pro premium commented 11 months ago

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


Konrad Stępień staff commented 11 months 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;

musme pro premium answered 11 months 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 11 months 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 pro premium commented 11 months ago

Yes, please! Thanks!


Konrad Stępień staff commented 11 months ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.16.0
  • Device: laptop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No