I am using react-datepicker module in my website. I want to disable the dates after 2 weeks. for example, today date is : 20-02-2019, so i want to disable dates after 5 march 2019.
How can i do that?
You can give a date that is 13 days into the future to the maxDate prop.
Example (CodeSandbox)
class App extends React.Component {
state = {
startDate: new Date()
};
handleChange = date => {
this.setState({
startDate: date
});
};
render() {
const twoWeeksFromNow = new Date();
twoWeeksFromNow.setDate(twoWeeksFromNow.getDate() + 13);
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
maxDate={twoWeeksFromNow}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
You can add maxDate attribute to your datepicker code.
maxDate={addDays(new Date(), 13)}
The react-datepicker component you are using, already has includeDates parameter.
() => {
const [startDate, setStartDate] = useState(null);
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
includeDates={[new Date(), addDays(new Date(), 1)]}
placeholderText="This only includes today and tomorrow"
/>
);
};
This above code is for showing only today and tomorrow. If you want to show dates for two weeks, simply add the list of days in array (line 7).
Link for that particular section https://reactdatepicker.com/#example-include-dates
Related
I'm trying to return multi value using function but, i'm not getting the desired output.
created a list naming l2 which are having the values.
filterdate function helps us to disable the days
import DatePicker from "react-datepicker";
function DateSetter(){
const [startDate, setStartDate] = React.useState(null);
const isWeekday = (date) => {
const l2 = [2,5,4]
const day = date.getDay(date);
return l2.map((_)=>{
return day!==_
})
};
<DatePicker
required
selected={startDate}
onChange={(date) => setStartDate(date)}
filterDate={isWeekday}
placeholderText="Select a weekday"
minDate={new Date() - 1}
/>
}
In the output after clicking on select date the days which are there in the created l2 that is 2,5,4 means Tuesday, Thursday and Friday should is disabled but in output it is not disabled.
I'm using react-datepicker, and I'm unable to get the actual date in onChange.
This is my component :
import DatePicker from "react-datepicker";
const DatePick = () => {
return (
<DatePicker
locale="fr"
dateFormat="dd/MM/yyyy"
onChange={(date) => {
console.log(date);
}}
/>
);
};
export default DatePick;
In console.log I'm getting this kind of string Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale).
I need to get the date as dd-MM-yyyy in onChange or a date that I can format and use later in a form and submit its value.
Use Below code , it will work like a charm
const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
<>
<DatePicker
dateFormat="dd/MM/yyyy"
value={Cdate}
onChange={(date) => {
const d = new Date(date).toLocaleDateString('fr-FR');
console.log(d);
setDate(d);
}}
/>
</>
);
stackblitz link: https://stackblitz.com/edit/react-nov8it?file=src/App.js
You can use the Date object, to format the date as you would like. For instance :
onChange={(date) => {
const dateString = new Date(date).toLocaleDateString()
console.log(dateString)
}}
You will then get the date formated to your locale time zone. However, if you specified a different format in your DatePicker from your local timezone format, then you can specify it as a parameter for toLocaleDateString:
new Date(date).toLocaleDateString("fr-FR")
I'm using react-final-form and react-datepicker. I also have a select for year. Start and end dates should be set to January 1 and December 31 of the default year. When a new year is selected I would like to reset the form, clear selected dates and input values of both datepickers and set them to January 1 and December 31 of the selected year respectively.
Here is the link to my codesandbox https://codesandbox.io/s/react-datepicker-clear-cxlxh.
So far, I have a custom component for react-datepicker which works with react-final-form. Start and end dates are set to January 1 and December 31 of the default year.
DatePicker component:
const DatePickerWrapper = props => {
const { input, label, minDate, maxDate } = props;
const [startDate, setStartDate] = useState(input.value);
return (
<div>
<label>{label}</label>
<DatePicker
selected={startDate}
minDate={minDate}
maxDate={maxDate}
onChange={value => {
setStartDate(value);
props.input.onChange(value);
}}
onBlur={props.input.onBlur}
onFocus={props.input.onFocus}
value={props.input.value}
/>
</div>
);
};
And Field where it is used:
<Field
name="startDate"
initialValue={isoDate(minDate(values.year.value))}
component={DatePickerWrapper}
minDate={minDate(values.year.value)}
maxDate={
values.endDate ? values.endDate : maxDate(values.year.value)
}
/>
Here is my component for resetting the form:
<Field name="year" subscription={{}}>
{({ input: { onChange } }) => (
<OnChange name="year">
{value => {
form.reset({
...initialValues,
year: value
});
}}
</OnChange>
)}
</Field>
So my questions are:
How can I clear react-datepicker and its input value on form reset? There is a clear() function, but I couldn't make it to work.
How can I then set the dates to January 1 and December 31 of the selected year? I've added initialValue for each field and the values of the form are updated. But the inputs' values stay the same.
You have few issues in the form.
You are giving initial values to you dates twice. Once at the top and then again as the props. This is causing the render to go into infinite loop. Have moved all the form initialization to top in object
const initialValues = {
year: { value: "2019", label: "2019" },
startDate: isoDate(minDate("2019")),
endDate: isoDate(maxDate("2019")),
amount: ""
};
When you are doing form.reset for the year, at that place you can reset the value for the start date and end date
form.reset({
...initialValues,
year: value,
startDate: isoDate(minDate(value.value)),
endDate: isoDate(maxDate(value.value))
});
From the given code, I didn't see any requirement for usestate in datepicker.jsx as it seemed to be getting handled by the form. And so have removed it.
I have updated the code in the Sandbox.
Have a look at it and let me know if any thing is missed or you have any doubts.
The value is stored in this.component_name.current.state, so use an assignment operator and assign an empty string to it. do this operation in a callback of a state change operation (either a setState or a useState). Should work. worked for me.
this.startdate.current.state.value = "";
this.startdate.current.state.inputValue = "";
I am new in react. I need use react-datepicker
I want to get value of input, when I change date.
If i click on 20th October 2017, i want put 20th October 2017 in my variable.
But the main problem that I should work with component, not with input.
Before I just took value from state. Like this.state.value. But right now it is object(Moment) in state. And this object doesn't have value field.
There is my code:
export default class DatePicker extends Component {
constructor (props) {
super(props);
// this.props.date should looks like "29 November 2017 00:00"
// second argument for moment() it is format of date, because RFC 2822 date time format
this.state = {
date: moment(this.props.value, 'LLL')
};
}
handleChange = (date) => {
// const valueOfInput = this.state.date <--- I want string with date here
console.log('this.state.date',this.state.date);
this.setState({date: date});
};
render() {
return <Form.Field>
<Label>
<Picker
selected={this.state.date}
onChange={this.handleChange}
dateFormat="LLL"
locale={this.props.language}
/>
</Label>
</Form.Field>
Just use this:
handleChange = date => {
const valueOfInput = date.format();
///...
};
Because this datepicker returns a moment.js object!
For more information, look into the moment.js docs here.
Try this
<DatePicker
onChange={(value, e) => this.handleChange(value, e)}
selected={this.state.inputValue} otherProps={here}
/>
// you can access the value field in handleChange by e.target.value
handleChange(value, e) {
console.log(value); // this will be a moment date object
console.log(e.target.value); // this will be a string value in datepicker input field
}
This solved for me by using the following:
handleDateChange = date => {
let selectedDateFromCalender = date.toUTCString();
this.setState({
actualStartDate: selectedDateFromCalender,
});}
<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}/>
You can use the following methods as well, choose according to your requirement:
toISOString: "2020-10-05T09:10:38.000Z"
toJSON: "2020-10-06T09:09:16.000Z"
toUTCString: "Thu, 08 Oct 2020 09:11:24 GMT"
If you want to get the new value (once the user clicks on a new date from DatePicker) pass the event to the method.
class MyComponent extends React.Component {
constructor(props) {
this.state = {inputValue: moment(),} // this will set the initial date to "today",
// you could also put another prop.state value there
this.handleChange = this.handleChange.bind(this);
}
}
handleChange(value) {
console.log(value); // this will be a moment date object
// now you can put this value into state
this.setState({inputValue: value});
}
render(){
...
<DatePicker
onChange={(event) => this.handleChange(event)}
selected={this.state.inputValue} otherProps={here} />
...
}
};
The new version of react-datepicker library stopped using a moment.js object, so here is my solution if you want to get a formatted string representation of the date.
First import
import format from "date-fns/format";
Then
<DatePicker
onChange={(value)=>this.handleChange(format(value, "yyyy/MM/dd", {
awareOfUnicodeTokens: true }))}
dateFormat="yyyy/MM/dd"
selected={this.state.inputValue} otherProps={here} />
...
You can use the getTime() helper function on your date object to get the millisecond timestamp for that specific date, which is a JavaScript number data type. Useful for saving data in the backend of your application. For example Flask Peewee ORM requires a timestamp to be saved for the DateTimeField.
const [startDate, setStartDate] = useState(new Date())
<DatePicker
onSelect( date => {
setStartDate(getTime(date))
}
/>
source: https://date-fns.org/v2.0.0-alpha.7/docs/getTime
Combine it with an effect to set the default state value to a timestamp on page load:
useEffect(() => {
setStartDate(getTime(startDate))
}, [])
Otherwise for your UI, you can use the format() helper function to get the string value of the given object, with any given format:
<h1>{format(startDate, "MMMM d, yyyy h:mm aa")}</h1>
source: https://date-fns.org/v2.0.0-alpha.7/docs/format
I have same problem, and I solved it by using the below solution. Please try it:
<p>{this.state.date.toLocaleDateString()}</p>
<input id="tdate" type="date" name="todate" onchange="getToDate(event);">
function getToDate(e){
const tdate = e.target.value;
//alert(tdate);
//console.log(tdate);
//return tdate;
};
here i am trying to access "tdate" variable outside the function.
I'm using this setup for react big calendar:
render() {
return (
<div>
<BigCalendar
selectable
step={3}
timeslots={10}
events={eventsE}
defaultView='week'
onSelectEvent={event => this.onSelectEventDate(event)}
onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
/>
</div>
);
I'm using this plugin http://intljusticemission.github.io/react-big-calendar/examples/index.html
But the start time is always at 12AM
How can i change to start only at 8AM...and do not waste time slots.
Thanks in advance
Carlos Vieira
You have to set today date in state and after use.
// For react-big-calendar: "^0.27.0",
// declare 'today' inside your component
const today = new Date();
// start time 8:00am
min={
new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
8
)
}
// end time 5:00pm
max={
new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
17
)
}
You need to set the 'date' prop to your request date:
render() {
return (
<div>
<BigCalendar
selectable
step={3}
date={new Date(Date.now())}
timeslots={10}
events={eventsE}
defaultView='week'
onSelectEvent={event => this.onSelectEventDate(event)}
onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
/>
</div>
);
anther prop you can use is 'defaultDate'.