I would like to restrict users from selecting particular dates based on business logic in react native ios/ android date pickers. Currently in the document i only see that a min date and max date can be provided.
So is there a way to only restrict lets say (5 , 6, 10, 12 , 18) of a month?
Note: these dates are just an example would change from a case to case scenario
For IOS example
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={(date) => {
if(isAllowedDate(date)) {
this.setState({chosenDate: newDate})
}
else {
this.setState({error:'you can not select this date ...'})
}
}}
/>
use react-native-datepicker module for iOS and Android , set a method to check if date valid or not
render(){
return(
...
<DatePicker
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
onDateChange={this.saveDateIfValid}
/>
...
)
}
saveDateIfValid = (date) =>
{
if(date){
let dateArray = data.split("-");
let validDays = [5,6,10,12,18];
let selectedDay = parseInt(dataArray[2]);
if(validDays.indexOf(selectedDay) > -1){
//date is valid
this.setState({date : date});
return; //end the method
}
}
//not valid
this.setState({date : null});
}
Related
I want to disable the dates before event date and event date. But not able to do .Please help to fix this out. Below I am sharing my code.
eventDate = newDate("2022-07-08");
const disableCustomDt = current => {
return !eventDate .includes(current.format('YYYY-MM-DD'));
}
<DatePicker timeFormat={false} isValidDate={disableCustomDt} />
You can refer to this answer
You can compare your current date with today and return true or false
I'm using ant design date time picker, I'm disabling the past date and before the current time, but I have some conflict on the picker, when I click the future date that time always disable before the current time, anyone knows some solution for the issue
here the stack blitz
Here my code
//date disable
disabledDate(current: any) {
// Can not select days before today and today
//return current && current < moment().endOf('day');
return current && current < moment().startOf("day")
}
//time disable
getDisabledHours() {
var hours = [];
for (let i = 0; i < moment().hour(); i++) {
hours.push(i);
}
return hours;
}
//time disable
getDisabledMinutes = (selectedHour: any) => {
var minutes = [];
if (selectedHour === moment().hour()) {
for (var i = 0; i < moment().minute(); i++) {
minutes.push(i);
}
}
return minutes;
}
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={this.onChangeDate}
style={{width: "100%"}}
showTime={{ disabledMinutes: this.getDisabledMinutes,
disabledHours: this.getDisabledHours}}
/>
Problem that I found in your code is, while disabling the hours, you're not taking selected date into consideration.
Just add a condition, that disables logic will run only for the current date, and not for the future dates.
For that condition, you can compare your currently selected date from the state.
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={date => this.setSatate({date})}
style={{width: "100%"}}
value={moment(this.state.date)}
showTime={{
disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes,
disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours
}}
/>
https://stackblitz.com/edit/react-ts-rtsqmw
Note: onChange only triggers when you click OK button in the picker, and after selecting a date, when you select the time, then the disable issue will disappear. I not aware of ant design APIs much, but your issue is fixed, all you have to do is update the state of the selected date on clicking on the date and not OK button
I already follow the docs that works well with date object for pickup time and edit time but problem arise when i have custom time that stored in database like 04:00 PM and on edit event i have to display that time on textfield and edit but edit can't works because format is
timestring.
docs: https://material-ui-pickers.dev
https://codesandbox.io/s/lucid-varahamihira-2unp9
Here the relevant code :
handleStartTimeChange(date) {
this.setState({
offerStartTime: date
});
}
editTime() {
this.setState({
custom_time: "03:00 PM"
});
}
render() {
return (
<div className="app">
<Timepicker
value={this.state.offerStartTime}
onChange={date => this.handleStartTimeChange(date)}
inputValue={this.state.custom_time}
/>
<button onClick={() => this.editTime()} style={{ marginTop: "0px" }}>
Edit
</button>
</div>
);
}
I am not sure I understand your need, I think you want to parse the value you have from string to date.
You can use any library you want for this or the built-in Date in javascript, or you can make a custom function if you are confident about the input.
Example :
editTime() {
this.setState({
offerStartTime: parseTime("03:00 PM")
});
}
function parseTime( t ) {
var d = new Date();
var time = t.match( /(\d+)(?::(\d\d))?\s*(p?)/ );
d.setHours( parseInt( time[1]) + (time[3] ? 12 : 0) );
d.setMinutes( parseInt( time[2]) || 0 );
return d;
}
//render
<Timepicker
value={this.state.offerStartTime}
onChange={date => this.handleStartTimeChange(date)}
// I am not sure you need this : inputValue={this.state.custom_time}
/>
The parseTime function has been found in this SO answer
I am trying to show a validation error message on Date picker like how we do for TextField using errorText and errorStyle props but the validation error message is not working for DatePicker.
I am using material-ui version "^0.18.7".
Please find full functionality below. I am not sure exactly how to implement this. I also understand that the errorText and errorStyle is not a valid prop to DatePicker. Thought it will work for datepicker but it is not. Is there a way to achieve this.
import DatePicker from 'material-ui/DatePicker';
constructor(props){
super(props)
const dateYesterday = new Date();
dateYesterday.setDate(dateYesterday.getDate() - 1);
this.state={
dob: null,
dobError: '',
dateYesterday: dateYesterday
}
this.changeDateOfBirth = this.changeDateOfBirth.bind(this)
}
changeDateOfBirth = (evt, date) => {
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}else{
this.setState({
dobError: '',
dob: date
});
}
}
const errorStyle = {
display: 'table'
}
<DatePicker
dialogContainerStyle={{position: 'absolute'}}
errorText={this.state.dobError}
errorStyle={errorStyle}
inputStyle={myTheme.inputStyleText}
underlineStyle={myTheme.underlineStyle}
underlineFocusStyle={myTheme.underlineStyle}
floatingLabelStyle={myTheme.floatingLabelStyle}
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
Please suggest.
The DatePicker spreads props through to children elements, so you can in fact use the errorText and errorStyle props from the TextField element. For example, I tested the following DatePicker in "^0.18.7" and can confirm it shows up with a red error message:
<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />
You should be aware that the onChange callback in the DatePicker is only fired when a date is selected, so the date argument will never be null or undefined. In other words, you'll never enter into the following if statement:
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}
If you want to check for cases in which the user has not set any kind of date, consider just checking whether or not your DOB is null (I left out the irrelevant props to keep things short):
<DatePicker
errorText={this.state.dob ? {} : this.state.dobError}
errorStyle={this.state.dob ? {} : errorStyle}
>
I am facing issues with onSelect event for range selection in react-infinite-calendar. Can any one suggest me with answers ? I want to select start date and end date and get those values to pass to the state.
JSX
<InfiniteCalendar
Component={withRange(Calendar)}
height={350}
min={new Date(2017,8,1)}
selected={this.state.selectedDates}
layout={'portrait'}
width={'100%'}
onSelect={this.onCalendarSelect}
/>
onCalendarSelectCode
onCalendarSelect = (e) => {
if (e.eventType === 3) {
this.setState({ selectedDates: {
start: e.start,
end: e.end,
} });
}
}
on select with range functionality will return an object with start, end, and eventType. Event type of 3 will indicate user has selected a start and end. You can then set this to state.