I am using latest material-ui/pickers v4-alpha7.
Is is possible to show action buttons for the DateRangePicker. I know that they are shown by default for MobileDateRangePicker but can not find the solution for the regular DateRangePicker.
function BasicDateRangePicker() {
const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
return (
<DateRangePicker
startText="Check-in"
endText="Check-out"
value={selectedDate}
onChange={date => handleDateChange(date)}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} />
</>
)}
/>
);
}
Br, Igor
From their current docs:
Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices. The default DateRangePicker component is responsive, which means that Mobile or Desktop mode will be rendered according to device viewport.
You can either use the DateRangePicker - which will be responsive, or decide that you prefer to force specific behaviour by using MobileDateRangePicker or DesktopDateRangePicker.
Source: https://mui.com/components/date-range-picker/#responsiveness
There is no prop that you can pass to the DateRangePicker to force using the mobile version in order to show the buttons (you can just use the MobileDateRangePicker if you need it to work this way).
Related
I notice that in Material UI Dialog, sometimes it doesn't display the correct layout. For example:
These are the same component. However, it displays different styles. The second style is the one I want it to be. It's really inconsistent. Sometimes it displays the second one, but sometimes it shows the first one. Does anyone know what's going on? I didn't override any textfield styles at all, I just override the global primary colour and font.
My textfield component:
<TextField
error = {error.firstName? true: false}
label="First name" variant="outlined"
name = "user.firstName"
value = {props.newUser.firstName}
onChange = {e => {
props.setUser((prevUser) => ({
...prevUser,
...{firstName: e.target.value} }
));
}}
helperText = {error.firstName && error.firstName}
fullWidth
/>
Are you currently migrating to v5? If yes, I would guess that you still have #material-ui/core in your bundle because it is a peer dependency of some other dependency that you have.
Try running yarn why #material-ui/core (or npm ls #material-ui/core) and check if this is the case.
You would need to upgrade the dependencies that depend on #material-ui/core to the specific version that depends on #mui/material.
Is there a way to implement a Static read only calendar displaying available dates like for the booking system when you review an apartment and its availability with Material UI pickers?
I have tried to use StaticDatePicker:
<StaticDatePicker
disablePast
displayStaticWrapperAs="desktop"
disabled
openTo="date"
value={value}
renderInput={(props) => <TextField {...props} />}
pickerProps={{ readOnly: true }}
/>
However, it still allows picking some date from that calendar...I would like it to be display only, showing what dates are taken and what available
Something like this displaying available & prohibited dates while not allowing user to pick any date (readOnly) Example
You can use the - shouldDisableDate handler to prohibit all dates except the allowed ones:
https://v4-0-0-alpha-12.material-ui-pickers.dev/api/DatePicker
I don't know why I can't wrap my head around how to use Material UI's DatePicker. It seems that the documentation is not complete? Am I correct?
Here is the basic example I have:
import {DatePicker, MuiPickersUtilsProvider} from '#material-ui/pickers';
import DateFnsUtils from "#date-io/date-fns";
... somewhere in the render:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
id="date"
value="2017-05-24"
allowKeyboardControl={false}
autoOk={true}
/>
</MuiPickersUtilsProvider>
At first I got errors that 'n' something something wasn't working, and that is because either date-io or date-fns (the newer versions) wheren't supported. After downgrading.. I got told that the _onChange is not a function. I randomly thought that I could add an empty onChange={()=>{}} to get that error to go away and it did. Now I am noticing that when I actually select a date, the DatePicker date displayed on my page doesn't update to the new date.
So.. am I supposed to supply an onChange event? Why is that not clear anywhere?
Also, is the date supposed to be updating by default, or is my onChange supposed to do that?
UPDATE:
So.. it turns out this page that documents Material UI Pickers has a "View Code" icon under their examples (https://material-ui.com/components/pickers/).
So that shows how to handle the onChange. I wish it was more obvious in this documentation.
Use #date-io/date-fns of v1.x
Pass required onChange callback:
function BasicDatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<DatePicker
value={selectedDate}
onChange={handleDateChange}
/>
);
}
Here is working example
I am trying to style the calendar icon (to be specific increase the font-size of the icon) inside material UI's keyboard datepicker text field in React.
<KeyboardDatePicker
keyboard={!this.props.isDisabled}
keyboardIconProps={{ fontSize: "35px" }}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
pickerRef={node => (this.picker = node)}
InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
onError={console.log}
value={this.props.storeValue}
onChange={this.onChangeCallback}
format={this.props.displayFormat}
onBlur={this.onBlurCallback}
disableOpenOnEnter
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
I tried setting the KeyboardButtonProps but it doesn't seem to set the style of the icon. I searched online and there are no solutions for my problem. Any help would be much appreciated. Cheers!
Assuming that you use KeyBoardDatePicker from #material-ui/pickers
You can change the icon via the keyboardIcon prop which expects a ReactNode as a child.
Basically just add the following prop to your component
keyboardIcon={<SomeReactElement/>}
Here you have a working sandbox
Cannot mention minimum value and need to customize the arrow button
<NumericTextBoxComponent
validateDecimalOnType={true}
format='n2'
placeholder="Applied"
enabled={this.props.overApplied}
change={this.props.handleOverApplied}
value={this.props.added.value}
/>
Query-1: Setting minimum value
If you want to set minimum/maximum values in NumericTextBox, Please refer to the below range validation online sample,
<!-- Initialize Numeric Textbox -->
<ejs-numerictextbox id="numeric" min="10" max="100" value="15"></ejs-numerictextbox>
Sample : https://ej2.syncfusion.com/aspnetcore/NumericTextBox/RangeValidation#/material
Query-2: Customizing arrow buttons
To customize the arrow buttons to different icons, you can refer to the below how-to documentation page,
https://ej2.syncfusion.com/aspnetcore/documentation/numerictextbox/how-to/customize-the-spin-buttons-up-and-down-arrow/
Note:
We assumed that you are using ASP.Net Core and Provided the above information. If you are using different platform, the same links are available in that platform itself.