I am using react-datepicker just like below having minDate property.
<DatePicker
className="form-control"
minDate={new Date()}
selected={this.props.GrantExpiryDate}
onChange={(e) => { this.props.onGrantExpiryDateSubmit(e); }}
disabled={disableControl} />
{this.props.GrantExpiryDate == null ? <div className={styles.requiredValidation}>Please select a date</div> : ''}
If I select the Date by using DatePicker its worked fine as shown in the snap.
but when I entered date by manually typing in the date picker control it's allows me to enter older dates those are disabled.
I know this can be handled through the custom function but still this is not behavior which i was expecting from minDate property.
Is there any property or something to overcome this problem.
try to use this
<DatePicker
...
onChangeRaw={e => e.preventDefault()}
/>
Related
I am using material ui's date picker.
https://mui.com/components/date-picker/#basic-usage
The default format of the datepicker is MM-dd-yyyy (02-23-2022). I want to change the default format to be dd-MM-yyyy` eg. (23-02-2022).
To have it display in the correct format i have used the inputFormat. However i noticed that the onChange value is still an object and therefore i have used the format function from the adapter date-fns to format the value before storing it in state.
However, although the console logs the correct foramt, the value being set in state for the date is still using the old format (MM-dd-yyyy)
What am i doing wrong here. Please see the ccodesandbox for continence https://codesandbox.io/s/basicdatepicker-material-demo-forked-460hxz?file=/demo.js:418-820
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(format(newValue, "dd-MM-yyyy"));
}}
renderInput={(params) => <TextField {...params} />}
mask="__-__-____"
inputFormat="dd-MM-yyyy"
/>
</LocalizationProvider>
You need to add a 'rifmFormatter' prop, and write a function to handle it. I am working on MUI X, but it is the same as in previous versions. see: https://mui.com/x/api/date-pickers/date-picker/
You don't need to apply any format for the data. inputFormat="dd-MM-yyyy" will take care of everything on MUI Datepicker. This code is working perfectly. Whatever value you are getting is basically a Date type. You can apply format on that.
<DatePicker
views={["day"]}
label="Just date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
inputFormat="dd-MM-yyyy"
renderInput={(params) => <TextField {...params} helperText={null} />}
/>;
Attaching the sandbox for reference.
I currently have a react-hook-form managed form that I've added an antd RangePicker to. I'm having issues with updates to the RangePicker getting passed to the form object. Currently, the default values are passing fine but it's not taking any changes.
OnChange events seem to be being handled by the standard Controller method with the other field types (Input, etc.). My guess is I have to write something custom here but I'm not sure. Thanks in advance for any help.
Here is my current antd DatePicker that is being managed with react-hook-forms Controller method.
EDIT: Updated my code to use the render method in react-hook-form v6+ as opposed to the as method. I also noticed if I don't pass any defaultValue then the RangePicker accepts and passes both the start and end dates fine. But when I set the defaultValue it always returns the default start date twice.
<Controller
name="materialarrivalpickup"
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),
moment(user.project.projectmaterialpickup),
]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker " + e);
}}
/>
)}
/>
Figured this out. Apparently, react-hook-form was properly passing the RangePicker changes to my form object I just couldn't tell based on the log.
When I update the picker the Moment object (two dates) wasn't looking updated in the log produced by react-hook-form watch() (both look like they're 3/3/2020).
But when I expand the Moment object I'm getting my updated dates (3/3/2020 and 3/5/2020).
I'll leave my working RangePicker + react-hook-form code here for anyone else that needs it.
<Controller
name="materialarrivalpickup"
style={{ marginBottom: "8px" }}
control={control}
defaultValue={[
moment(user.project.projectmaterialarrival),
moment(user.project.projectmaterialpickup),
]}
rules={{ required: true }}
render={(props) => (
<RangePicker
{...props}
format="MM/DD/YYYY"
onChange={(e) => {
props.onChange(e);
console.log("Range Picker: " + e);
}}
/>
)}
/>
I have a form where a user can submit some info needed
One of the fields is a Date of Birth
I am using react-datepicker package for that specific field
A piece of code looks like this:
<label>
<DatePicker
autoComplete='off'
dateFormatCalendar="MMMM"
showYearDropdown
scrollableYearDropdown
onChange={this.handleChange}
selected={this.state.formData.dob}
maxDate={moment().subtract(6570, "days")}
minDate={moment()}
placeholderText="Date of birth"
name="dob"
customInput={
<Input type='text' onKeyPress={e => e.preventDefault()} validations={[required]} value={this.state.formData.dob} />
}
/>
</label>
6570 = 18*365 are days converted from 18 years, I know it's a not a solid one, because there are a 364 days also
Here is a screenshot for datepicker not being able to choose a date
https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21
Any thoughts or recomendations how can achieve how user can be at least 18 yo to submit a form?
Thank you!
This issue can be resolved by using Specific date range example.
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().subtract(500, "years")}
maxDate={moment().subtract(18, "years")}
showDisabledMonthNavigation
/>
You may check the working demo on codesandbox.io.
The solution above wasn't working for me, I just added ._d after moment().subtract(18, "years") to trim only the date.
my final code:
<DatePicker
selected={ selectedDate }
onChange={ date => setSelectedDate(date) }
dateFormat='dd/MM/yyyy'
maxDate={moment().subtract(18, 'years')._d}
showYearDropdown
scrollableYearDropdown
/>
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="dd/MM/yyyy"
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={subYears(new Date(), 18)}
/>
I know I am a bit late for this thread > but recently I also got stuck with this problem
if you want to set a range for date-picker I came up with this solution
<DatePicker
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={150}
minDate={moment().subtract(150, "years")._d}
maxDate={moment().subtract(18, "years")._d}
scrollableYearDropdown
/>
Min/Max and yearDropdownItemNumber option need to be added to get rangeLocked response
I hope it will help someone looking for rangeLock
If you came here for react native, let me save you some time. The props are:
minimumDate={new Date(moment().subtract(150, "years"))}
maximumDate={new Date(moment().subtract(18, "years"))}
When using the React Datepicker library with Moment.js to manipulate dates, one can exclude given days as captured below and described in the React Datepicker documentation;
// Exclude today and yesterday.
excludeDates = {[moment(), moment().subtract(1, "days")]}
How can I exclude future dates from a given date?
You can use filterDate check and return true if the date is in past.
The snippet below illustrates how to use filterDate;
<DatePicker
selected = {this.state.date}
onChange = {this.handleChange}
filterDate = {(date) => {
return moment() > date;
}}
placeholderText = "Select a weekday"
/>
You can use Datepicker's minDate & maxDate options.
Eg: if you want to exclude all the dates after 10 days,
<DatePicker
selected={new Date()}
onChange={this.handleChange}
maxDate={addDays(new Date(), 10)}
/>
If you want to exclude all past dates and dates after 10 days.
<DatePicker
selected={new Date()}
onChange={this.handleChange}
minDate={new Date()}
maxDate={addDays(new Date(), 10)}
/>
I'm trying to use react-datepicker in my project and I have it wrapped so I can easily use it with redux but the openToDate prop doesn't seem to be doing anything. Has any one else experienced this and/or found a fix/workaround.
Here's my control
export function renderDatePicker ({input, placeholder, defaultValue, meta: {touched, error}, ...custom }){
return (
<div className="form-group">
<DatePicker
{...input}
{...custom}
dateFormat="MMDDYYYY"
selected={input.value ? input.value : null}
placeholderText={placeholder ? placeholder : ''}
isClearable={!custom.disabled}
className="form-control" />
{touched && error && <span className="error">{error}</span>}
</div>
);
}
And how I use it...
<Field name="StartdDate"
component={renderDatePicker}
openToDate={this.props.minDate}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
placeholder="Select Start Date"
showMonthDropdown
showYearDropdown />
Most of my use cases limit the selectable dates to previous years and limit it to only that year (i.e January 1, 1990 - December 31 1990). So always opening to the current date is kind of annoying, which is why I'd like openToDate to open to the minimum allowed date. For some reason though it always opens to the current date.
The only way I got it to open to the min date was to set selected to default to defaultValue and pass in this.props.minDate as the defaultValue. But I don't want the date to be pre-selected.
I found that downgrading the version to v.0.40.0 fixes the problem and opens to the openToDate value or the maxDate if no openToDate is set.