How to disable dates between Min and Max dates in material UI date textField?
Example, Let's say minimum date is today's date 01/30/2023 and maximum date is next month's date 02/30/2023. I want to disable 01/31/2023, 02/01/2023 and 02/02/2023 dates in the calendar.
My code is:
<TextField
variant="outlined"
id={row?.id}
size="small"
onKeyPress={(e) => {
e.preventDefault()
}}
type="date"
inputProps={{
min: "01-30-2023",
max: "02-30-2023"
}}
></TextField>
Please help me to find the solution.
I think by using TextField with type='date', it's rendering just a text field and you are relying on browser native datepicker, using which it's difficult to achieve what you want. Instead if you change to DatePicker from mui, it has a property shouldDisableDate, which takes a function, where you can add the logic to disable specific date.
You can use mui datepicker and minDate and maxDate props
sth like this :
const [selectedDate,setSelectedDate] = useState();
return (
<DatePicker
placeholder="MM-DD-YYYY"
format={'MM-DD-YYYY'}
maxDate="02-30-2023"
minDate="01-30-2023"
value={selectedDate}
onChange={(date)=>setSelectedDate(date)}
animateYearScrolling={false}
autoOk={true}
clearable
/>
);
Related
I have a Date and Time picker that I want to further customize. I want to add an extra button that allows the user to jump to an existing request date and so that they only have to input the time, but I don't like the way the extra footer looks. Is there a way to move this button to the same footer as the OK button?
Or maybe change the "Now" functionality to jump to specified date instead of today? I've been able to change the text but I'm not sure if this is the best approach.
I know that there is a panelRender property on AntD Datepickers but I can't find any examples using it and am having trouble figuring it out.
<Form.Item name="requestDateTime">
<DatePicker format="YYYY-MM-DD h:mm A"
locale={{
...locale,
lang: {
...locale.lang,
now: "Request Date"
}
}}
renderExtraFooter={() =>
<Button onClick={()=> {
form.setFieldsValue({["requestDateTime"]: moment(initialRequestDate)})}
}> Request Date</Button>
}
showTime={{ defaultValue: moment('00:00:00', 'h:mm A') }}>
</DatePicker>
</Form.Item>
I am using a mui textfield and it works fine when I use it without hooking it upto the state but once I hook it to the state, the
<TextField
size="small"
type="number"
inputProps={{ min: 0, max: 999 }}
/>
This is the default one that was working like a charm but the moment I hook it upto the state, it starts to break. After tweaking it around I got it to display the value and not overlap the placeholder but now I can't seem to be able to handle the value change.
<TextField
size="small"
type="number"
label="px"
value={shapeHeight}
InputLabelProps={{ shrink: true }}
inputProps={{ min: 0, max: 999 }}
onChange={(e) => { console.warn(e.target.value)}}
/>
Was just trying to check if onChange works but all it returns is 1 over and over again.
Now I could make do it that and on every click just increment the value once but onChange only works when clicking the up arrow and not the down arrow.
Next I tried to use onClick and it works on both up and down arrow click but I have no way to differentiate between the two different clicks.
I am very new to React JS. I currently have a web page with the a simple DateTimePicker. It works fine. Currently, the datetimepicker shows up as blank, and you can select a date from the dropdown, it'll populate the input and display this date. So what I want to do is instead if having it blank, I want to set the input to today's date right away, so that when I go to the page the datetimepicker's input is not blank - it already displays today's date. I tried a lot of things but they didnt work, in my code below I tried to use setDate(), but it didn't work. I also tried setDate(new Date()), which also didn't work...
function MyDateFunction(props) {
const [canViewDatePicker, setCanViewDatePicker] = useState(
!!props.user.accountExpiryDate
);
const { t } = useTranslation();
return (
<Field>
<HorizontalFlex>
<DateTimePicker
cssClassModifiers={['column', 'is-one-third']}
time={false}
disabled={!canViewDatePicker}
label={t('myLabel')}
Date={('setDate', '0')}
/>
</HorizontalFlex>
</Field>
);
}
The DateTimePicker that I am using is from react-widgets/lib package
Any ideas much appreciated :)
Yay i figured it out! Inside my <DateTimePicker/> I had to put defaultValue={new Date()}
If you work with Calendar component from 'antd', then you mentioned that when you click the day of previous/next month, it will change the month automatically.
How to prevent this behaviour?
https://ant.design/components/calendar/#header
1. Disable dates
You can disable dates that not in current month. This should prevent clicking on them.
<Calendar value={selectedDate} disabledDate={disabledDate} />
disabledDate = currentDate => {
return currentDate.isSame(this.selectedDate, 'month'))
};
2. Prevent selecting
In case you want more control. You can set value manually with onSelect checking if current selected date is in current month.
<Calendar value={selectedDate} onSelect={this.onSelect} />
onSelect = date => {
if (date.isSame(this.selectedDate, 'month')) {
this.setState({
selectedDate: date,
});
}
};
Note
In this examples dayjs is used and supposed you followed
How to use Calendar with customize date library like dayjs
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent