1. HOW TO ADD MAX AND MIN LIMITS TO HARDWARE UI (MUI) TEXT FIELD COMPONENT
We can use the inputProps to set min and max value on TextField.
Below is the example with the TextField of type=date. We set the maximum value to the current date so that the user cannot select the future date. Likewise, the minimum value can also be set.
Moment Js is used to set the current date as the maximum value. You can also set the current date using Vanilla Javascript in different ways.
Also read add and subtract operations on current date and time in javascript.
|
|
import Text field Since “@mui/material/TextField”; import moment Since “moment”; const minMaxTextField = () => { back (
<Text field type=“date” inputProps={{ maximum: moment().format(“YYYY-MM-DD”) }} />
); }; export default minMaxTextField; |
You can also read here about a very popular component of MUI called Autocomplete which also use the TextField component as a nested component.
You can apply the above customization in the Autocomplete component also.
Read this article about how to remove up and down arrows from input type number and how to prevent non-numeric values.
2. HOW TO GET A LOCATION IN THE SELECT COMPONENT OF HARDWARE UI (MUI)
There are two attributes we need to use to get the placeholder: showEmpty And rendering value.
Below is the working example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
|
import { Select, Typography, Menu item } Since “@mui/material”; import {useState} Since “react”; export default function Application() { const [companyName, handleCompanyChanges] = useState(“”); back ( <Select variant=“describe” full width onChange={(event) => handleCompanyChanges(event.target.value)} value={Company Name ?? “”} showEmpty render value={(value) => { if (!value) { back ( <Typography component=“scope” color=“#989898”> Please select business name </Typography> ); } back value; }} > <Menu item value=“Asia”>Asia</Menu item> <Menu item value=“Africa”>Africa</Menu item> <Menu item value=“Europe”>Europe</Menu item> </Select> ); } |
3. HOW TO DISABLE HOVER EFFECT OR BACKGROUND EFFECT OF IconButton COMPONENT
This disable Ripple props is used with many MUI components to remove background effects from the component.
Likewise, whenever we use the IconButton component with any MUI iconthe icon gets the circular background effect when we hover over the icon or click on the icon.
|
|
<IconButton disable Ripple> <Remove outline icon/> conButton> |
