Is there any way to trigger the DatePickerDialog to open using an external control / button other than the built in input that comes out of the box with the DatePicker?
We are using the material-ui library.
Since the dialog open state is handled internally by material-ui components, the only way to do it would be using ref in the DatePicker and calling focus(). Kind of a hack - but it works..
Example:
<DatePicker
ref='datePickerStartDate'
errorStyle={componentSyles.error}
textFieldStyle={componentSyles.textField}
DateTimeFormat={Intl.DateTimeFormat}
cancelLabel={cancelLabel}
autoOk={true}
{...this.props}
/>
<FontIcon
onClick={(e) => { this.refs.datePickerStartDate.focus() }}
className="material-icons" style={componentSyles.icon}>
date_range
</FontIcon>
Related
Hi I am using Material UI version 0.20.0 in my project. I am using the Autocomplete component.
When I search the value and select the value using mouse its gets selected but I when I navigate the option using keyboard its goes navigates up and down using keyboard up and down arrow but on enter the highlighted values does not get selected.
I went through its docs but it does not support keyboard selection accessibility.
<AutoComplete
filter={AutoComplete.caseInsensitiveFilter}
onBlur={this.onBlur}
hintText={this.props.hintText}
searchText={this.state.searchText}
menuStyle={{ maxHeight: "300px" }}
className={this.props.className}
floatingLabelText={this.props.floatingLabelText}
name={this.props.name}
textFieldStyle={this.props.textFieldStyle}
dataSource={isSearchTextEmpty ? [] : this.props.dataSource}
dataSourceConfig={this.props.dataSourceConfig}
openOnFocus={this.props.openOnFocus}
onUpdateInput={this.onUpdateInput}
placeholder={this.props.placeholder}
errorText={this.props.errorText}
onFocus={this.handleOnFocus}
open={true}
onKeyPress={(e) => {
console.log("KP", e);
}}
/>;
Selection using keyboard enter press is working in the latest version of Material UI:
https://mui.com/material-ui/api/autocomplete/.
I use Date picker
inside of picker is an option to set it clearable, but this option is only when the picker is open
maybe is possible to add custom button like this:
Or maybe instead of doing something custom, to use another picker with option of clear inside of input?
You can add InputProps with endAdornment key to your DatePicker component in order to customize the input element and add a custom icon like this:
InputProps={{
endAdornment: (
<div
onClick={handleClear}
style={{ marginRight: 20, cursor: "pointer" }}
>
<ClearIcon />
</div>
)
}}
You can take a look at this sandbox for a live working example.
I am trying to open the Datepicker by pressing tab (when you are entering mutiple fields it is easy to use tab instead of clicking in the textbox) Only problem is i dont know how to do this:
<MobileDatePicker
variant="outlined"
label="Date of birth"
disableFuture
openTo="year"
views={['year', 'month', 'date']}
format="dd/MM/yyyy"
value={dateOfBirth}
onChange={e => {
setDateOfBirth(e);
setDateOfBirthError(false);
}}
error={dateOfBirthError !== false}
helperText={dateOfBirthError}
fullWidth
/>
anyone know how i can get this datepicker to open when i press tab?
You can use onFocus and controlled open prop in order to open it onFocus
But you likely want to have an accessible version of DatePicker so you can use v4.0.0-alpha version and DesktopDatePicker or just DatePicker in order to achieve built-in a11y
I like the look of the Material UI Styled Component api (not the styled-component library), but I'm having trouble turning my simple button component into a linked button.
How do I insert a react-router-dom link into a MUI Styled Component button?
Previously, the typical Material UI HOC api approach let me add a linked "reports" button as follows. It works great, but requires a lot more boilerplate (not shown here):
<Button
variant="contained"
color="primary"
className={classes.button}
component={Link}
to="/reports"
>
<ShowChartIcon className={classes.buttonIcon} />
Reports
</Button>
#1 Obvious Approach: When I follow this pattern and include the component and to properties my own MUI Styled Component called <MyButton>, I get a typescript error saying those properties don't exist.
#2 Different Approach: Following the pattern proposed in this material ui github issue, the button does indeed link to the reports screen, but the mui variant and color are lost:
<MyButton
variant="contained"
color="primary"
{...{
component: Link,
to: `/reports`
} as any}
>
<MyShowChartIcon />
Reports
</MyButton>
#3 Workaround Approach: A less desirable option is to wrap the button in a <Link>. That does create a working link, but it also brings in a little bit of unintended styling.
<Link to="/reports">
<MyButton
variant="contained"
color="primary"
>
<MyShowChartIcon />
Reports
</MyButton>
</Link>
Using the latest version of material-ui (v4.0.2) you can use the HOC component created with withStyles, but you will have to manually cast the custom component back to its original type:
const MyButton = withStyles(
createStyles({
root: {
color: 'red'
}
})
)(Button) as typeof Button
then you can use your custom component like you would the original one:
<MyButton component={Link} to="/blank-page">
my button
</MyButton>
Here is a working example: https://codesandbox.io/s/createreactappwithtypescript-n6wih
I found this solution from this comment: https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520.
Material UI ReactJS :does material UI support any autofocus feature on the popovers.
I want to set the focus on the popover, as soon as the material UI popover opens.
MaterialUI Popovers inherit the Modal API. Supposedly the disableAutoFocus property allows NOT focusing on Popover/Modal content, however I also am experiencing it NEVER focusing in the first place.
https://material-ui.com/api/modal/
On what do you want to set the focus ?
The "autoFocus" property should be set on some Popover content childs.
For example, we use the "autoFocus" property of Material-UI TextField for this :
https://material-ui.com/api/text-field/
Add the autoFocus property to the first form element in your popover.
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
>
<input type="text" autoFocus />
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
https://stackblitz.com/edit/qbx44l?file=demo.js