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
Related
I want to add the placholder to MUI 5 date picker, here is the MUI 5 datepickerlink: https://mui.com/x/react-date-pickers/date-picker/
The thing I want to achieve is: https://www.awesomescreenshot.com/image/31706755?key=096a75ccfcf711b0806280400c10727f
You can refer me to this chat, but it is not working in my case: How to set the placeholder text of the MUI DatePicker?
I also don't want to add label as the user click in the filed the lable pushed to the border.
So, my requirement is add the placholder text like we can add in the textfiled. I hope now it is clear now.
You can add placeholder on input props like this :
<DatePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
inputProps={{
placeholder: "Placeholder"
}}
renderInput={(params) => <TextField {...params} />}
/>
Happy coding.
I have problem using react-hook-form v7 + material-ui textfield. The defaultValue working if I set autoFocus or I manually change the textfield value. However if I just submit without mouse click on the filed that not autoFocus, the defaultValue disappeared during the form submit. Please check codesandbox link
Test 1: don't touch anything, click submit, you will see submit value only has title but missing name and desc
Test 2: mouse click or change value in name, you will see after submit the value of name is there
My question is how to make this default value always submit even though without mouse click or change the value of the textField?
Please help and thanks in advance
To use Material-ui with react-hook-form. It is better to wrap it with Controller to allow react-hook-form to link with the 3rd party library element.
https://react-hook-form.com/api/usecontroller/controller
Wrap Textfield with Controller
const { handleSubmit, control } = useForm();
...
<Controller
render={({ field }) => (
<TextField
autoFocus
margin="dense"
id="title"
label="Title"
type="text"
fullWidth
{...field}
/>
)}
control={control}
name="title"
defaultValue={data.title}
/>
...
After that, the default value will be able to work as expected.
Here is the codesandbox for demo.
I'm using React 16.13.0 and material's KeyboardDatePicker component -- https://material-ui-pickers.dev/api/KeyboardDatePicker . I have set it up like so ...
import {
KeyboardDatePicker,
KeyboardTimePicker,
MuiPickersUtilsProvider,
} from "#material-ui/pickers";
...
<KeyboardDatePicker
margin="normal"
id="date-pickUp"
label="Select Date"
format="MM/dd/yyyy"
value={pickUpDateLabel}
onChange={(date) => handleDate(date, "pickUp")}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
The thing I'd like to tweak is that when I click on the text field where you can type in the date or click the icon graphic to bring up the date picker, I would like the date picker UI to come up automatically. I'm not sure how to configure things though such that as soon as I click on the text field, the UI for the date picker pops up.
Edit: I'm unable to get a working app up with the code but here's a screen shot of the text field that is rendered by default with the icon at the right ...
Right now you have to click on that icon for the date picker to come up, but I would like to be able to click on the text field and immediately have the date picker appear.
Edit 2: Screen shot in response to answer given ...
Multiple issues to handle while solving this:
Since you want to the focus on the Input to control the opening of the DatePicker Popover - has to be a controlled component (which you control the opening of it using a state.
This state is actually the open prop of the KeyboardDatePicker
Next issue is that once the Popover is closed - the focus is getting back to the Input, and once we have a focus the the Popover will open (not good). We can solve this using the disableRestoreFocus prop of the Popover.
We need to use the onFocus of the Input to open the Popover, but the onClose of the Popover to actually close it (because we control the open-state of the Popover).
Lastly - the icon is no longer controlling the opening of the Popover. We need to do this, using the onFocus of the KeyboardButtonProps.
This is the complete code:
const KeyDatePickerContainer = () => {
const [selectedDate, handleDateChange] = useState(null);
const [isOpen, setIsOpen] = useState(false);
return (
<KeyboardDatePicker
variant="inline"
value={selectedDate}
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
onChange={newDate => {
handleDateChange(newDate);
}}
KeyboardButtonProps={{
onFocus: e => {
setIsOpen(true);
}
}}
PopoverProps={{
disableRestoreFocus: true,
onClose: () => {
setIsOpen(false);
}
}}
InputProps={{
onFocus: () => {
setIsOpen(true);
}
}}
open={isOpen}
/>
);
};
Here is a link to a working example: https://codesandbox.io/s/material-pickers-open-modal-click-on-text-kjgjk
Update: if you want to also close the DatePicker once the date was selected you can use the onChange function to not only set the new date, but also close the Popover:
onChange={newDate => {
handleDateChange(newDate);
setIsOpen(false); // Add this
}}
For anyone who uses updated material-ui library (v5), you can use open={bool} attribute to make use of when to open DatePicker.
const [dateOpen,setDateOpen] = useState(false);
const [dueDate,setDueDate] = useState(new Date());
<DatePicker
clearable={true}
open={dateOpen}
onClose={() => setDateOpen(false)}
label="Due Date"
value={dueDate}
minDate={new Date()}
onChange={(newValue) => {
setDueDate(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
onClick={() => setDateOpen(true)}
/>
)}
/>
For anyone else interested I came up with the following solution:
You change the KeyboardDatePicker to DatePicker
You take advantage of InputProps and add the calendar icon
InputProps={{
endAdornment: (
<InputAdornment>
<Event />
</InputAdornment>
)
}}
Working sandbox:
https://codesandbox.io/s/customicon-forked-zitm9?file=/src/DatePicker.js
How can I disable showing underline to material-ui-pickers?
sandbox
https://codesandbox.io/s/l2ykr7kwvz?from-embed
I want to removing underline to its TextField.
I tried
disableUnderline={true}
underlineStyle={{display: 'non'}}
showingUnderline={false}
But nothing works, How can I hide underline?
<DatePicker
underlineStyle={{display: 'none'}}
value={selectedDate}
onChange={this.handleDateChange}
animateYearScrolling={false}
/>
material-ui date-picker is a text field from the foundation and you can remove the underline simply using input-props
(DatePicker, TimePicker and DateTimePicker all will work this way)
<DatePicker
value={selectedDate}
InputProps={{
disableUnderline: true,
}}
onChange={this.handleDateChange}
/>
find the example from here
hope this will help you
I am trying to use the DateTimePicker component from react-widgets
Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.
The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.
Try this:
<DateTimePicker
inputProps={{
component: props => <input {...props} readOnly />
}}
/>
There's an active issue in react-widgets
repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.
I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.
<DatePicker
value={this.state.startDate}
onChangeRaw={event =>
this.setState({startDate: ''})}
onChange={value =>
this.setState({startDate: value})}
/>