I use DateTimePicker and want to say the minimum age is 13. How can I say it ?
<DateTimePicker
...
minimumDate={new Date()}
/>
I solvd it with:
<DateTimePicker
maximumDate={subYears(new Date(), 13)}
/>
Related
I have a very simple problem. I wanted to display the full date words, something like Nov 22th 2020.
Right now, i can only display the Month and the Date
Pls check my codesandbox
CLICK HERE
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
error={false}
helperText={null}
autoOk
fullWidth
inputVariant="outlined"
value={selectedDate}
onChange={handleDateChange}
variant="outlined"
/>
</MuiPickersUtilsProvider>
All you need is add prop format to picker, according to your example, you need format="MMM do yyyy". Here you can find more options
Show only last 30 days from today in npm react-date-picker dynamically in react.
Future dates from tomorrow should be disabled.
import DatePicker from "react-date-picker";
<DatePicker maxDate={new Date()} />
maxDate={new Date().setDate(new Date().getDate() + 90)}
Future date disable in react js. Here from today 90 days will be available for selecting
What exactly is the question? You can create a date 30 days from now in JavaScript as follows:
var futureDate = new Date();
futureDate.setDate(futureDate.getDate() + 30);
you can use moment() and especially the function subtract()
like in the exemple:
<DatePicker maxDate={new Date()}
minDate={moment(new Date()).subtract(30, 'days')} />
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"))}
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)}
/>