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.
Related
I am working on a project that is using Formik for React specifically the following NPM package - https://www.npmjs.com/package/formik-material-ui-pickers
I am using the code from the CodeSandbox link/example within this npm package for both -
https://codesandbox.io/s/915qlr56rp?file=/src/index.tsx:4770-4987
<Field component={TimePicker} name="time" label="Time" />
<Field component={DatePicker} name="date" label="Date" />
My question is, instead of a date and time appearing at start-up, how can I default the date to display DD-MM-YYYY as a placeholder as well as default the time to display HH:MI:SS as a placeholder?
Only when the user selects a date and time, do I want it to display and update Formik's initialValues.
I have checked the doco over at https://material-ui-pickers.dev/api/TimePicker and https://material-ui-pickers.dev/api/DatePicker and cannot see anything that will allow a default or placeholder value.
You need to do a custom DatePicker and put format into it
Solution
const CustomDatePicker = ({...props}) => (
<DatePicker format="dd-MM-yyyy" {...props} />
);
<Field component={CustomDatePicker} name="date" label="Date" />
// Do similar for TimePicker
I'm using the react-datepicker inside the react-final-form. I'm using a template with multiple steps https://codesandbox.io/s/km2n35kq3v?file=/index.js. The problem is that I'm not able to integrate the datepicker inside the component. My Code looks like this:
return (
<Field name={props.name} parse={() => true}>
{props => (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
selected={startDate}
dateFormat="P"
openToDate={new Date()}
minDate={new Date()}
disabledKeyboardNavigation
name={props.name}
value={startDate}
onChange={(date) => setStartDate(date)}
/>
)}
</Field>
);
Does anyone knows how I can use it so the data gets passed at the end of the form?
Best regards
I used the wizard form example you sent and added DatePicker similar to yours.
Check the wizard example
But basically, I changed your onChange method to actually use react-final-form field props. Now, it uses this.props.input.onChange, which updates the final form state value, and used this.props.input.value to set the selected state (you can then load initial values into final form):
const RenderDatePicker = ({ name, input, input: { value, onChange } }) => {
return (
<DatePicker
locale="de"
placeholderText="Datum eingeben"
dateFormat="P"
selected={value && isValid(value) ? toDate(value) : null} // needs to be checked if it is valid date
disabledKeyboardNavigation
name={name}
onChange={(date) => {
// On Change, you should use final-form Field Input prop to change the value
if (isValid(date)) {
input.onChange(format(new Date(date), "dd-MM-yyyy"));
} else {
input.onChange(null);
}
}}
/>
);
};
<div>
<label>Date of birth</label>
<Field
name="dateOfBirth"
component={RenderDatePicker}
validate={required}
/>
<Error name="dateOfBirth" />
</div>
Hopefully this helps you.
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()}
/>
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"))}
I'm using date picker in redux form. I want to show only year. But while posting data year field is going NULL in database.
Can anyone help me.
This is my code :
const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
<div>
<DateTimePicker {...input} format={"YYYY"} selected={input.value ? moment(input.value) : null} time={false} initialView={"decade"} finalView={"decade"} />
{touched && error && <span>{error}</span>}
</div>
);
<Field name="year" component={renderDatePicker} />
Thanks
you have to pass all props to DateTimePicker props in the correct way. I don't know how is working DateTimePicker component, but when you do
<DateTimePicker **{...input}** format={"YYYY"} selected={input.value ?
moment(input.value) : null} time={false} initialView={"decade"}
finalView={"decade"} />
{touched && error && <span>{error}</span>}
Into DateTimePicker has to assign redux-form input to its input prop, else always you will get null in that case. Also you can check in redux-form with property function 'validate' every time when you change that value you should see it.
edit:
I was looking for some issues like this, because I have to do something looked like in DatePicker for React-Native, in that case we don't have input but I have used in this way:
<Field name="birthday"
component={ props =>
<DatePicker
date={props.input.value}
onDateChange={(date) => props.input.onChange(moment(new Date(date)).format("MM/DD/YYYY"))}
/>
}/>
It's not best way, but this solution could help your case.