I downloaded react-native-material-calandarview inside my project.
They just give some piece of code to get calendar.
https://github.com/NuclleaR/react-native-material-calendarview.
I used that inside my render().
selectedDates={this.state.dates}......{this.state.dates} it gives undefined.
I need the selected dates array,but i cant get that.
where i get the selected dates???
Help me ASAP.Thanks in advance
The calendar expose you an event function onDateChange, you have just to setState in this event like that:
<Calendar
selectedDates={this.state.dates}
onDateChange={data => {
// Add the data to your state here
// for example:
this.setState(state => { dates: state.dates.push(data.date) });
}}
/>
Related
I am using React-Day-Picker to create an appointment booking tool. Currently, the output looks like this.
However the client would like the timeslots to display below the relevant week that has been selected like so:
The question is how can i achieve this?
I capture the onclick event whent user selects a date:
const handleDayClick = (day, { selected }, e) => {
const weekDIV = e.target.closest('.DayPicker-Week')
// non react way would be something like this
const test = document.createElement('div')
weekDIV.after(test)
// thought maybe portal would work?
//ReactDOM.createPortal(weekDIV, document.createElement('div'))
}
Nb: the timeslots are a component and not related to react-day-picker
I have set up a small example here: sandbox
appreciated any guidance.
thanks
In a component, I have a Calendar using react-calendar on the left side. I can add reminders via a form where I can select a date. These two dates are different displayed: the date from the react-calender is shown in the format 18/08/2021 while the date from the reminder form is shown as 2021-08-18.
How can I compare these two values so that only reminders are shown on the specific date when clicking on a calendar date? I tried to parse (which seems to be not recommended by MDN) but the output numbers are different. I tried to compare with valueOf() but the output is false.
EDIT:
I was able to compare both dates and the output is true. Therefore, I set a new prop to reminder "show" with the state of "false". But when I try to return this prop as true when both dates are the same, the prop does not change. (changing it manually with dev tools, the show/hide function works now perfectly fine).
In my index.js file, I created an onChange function when clicking a specific date in the calendar:
const onCalendarChange = (date) => {
setDate(date);
reminders.map((item) => {
const itemDate = item.date
.toLocaleString()
.slice(0, 10)
.replace(/\D/g, "");
const calDate = date.toLocaleDateString().split("/").reverse().join("");
console.log(itemDate === calDate);
if (itemDate === calDate) {
return {
...item,
show: true,
};
}
return item;
});
};
I also tried it with the filter() but this does not seem to work either. The reminders are shown the whole time.
const onCalendarChange = (date) => {
setDate(date);
setReminders(
reminders.filter(
(item) =>
item.date.toLocaleString().slice(0, 10).replace(/\D/g, "") ===
date.toLocaleDateString().split("/").reverse().join("")
)
);
};
1. First code snippet:
The first code snippet may not be working because you forgot to store the new array in a variable and reset reminders on the state using it (which you did correctly in the second code snippet).
So, the first code snippet should be something like this:
const updatedReminders = reminders.map((item) => {
// logic here
});
setReminders(updatedReminders);
2. Second Code Snippet:
Not sure why this isn't working, YET. I'll let you know when I have an update.
In the meantime, see if my suggestion for the first code snippet does the trick?
I'm working with react typescript component, and what I've noticed is that when I'm using this.setState, then it is is changing my event param values. The case is that I'm using a combobox which is calling on an event called handleChange.
<ComboBox
change={this.handleChange}
value={"test"}
/>
Under is the handler:
handleChange = (e) => {
$.get('/webapi/getItems?ID=' + e.target.value.id, (data) => {
this.setState({ textEditorValue: data });
});
}
It seems like the onChange function is being ran two times.
Because first the event param in the function has the correct values, then suddenly it changes to the basic object for events, also it runs two times the setState / the function.
How can I fix this?
There is something strange in your code, you seems want to fetch something with you api, but you do nothing with the result aka data.
I have a form, its a pickup/address form that can have multiple pickups.
Im having trouble figuring out how to get the event.target.name of the input selected to update my state correctly.
In this case, the input names are :pickups[ 0 ].pickup_datepickups[ 1 ].pickup_date
<FieldArray name="pickups" component={this.renderpickups} />
This has a button, "add pickup" that adds another address field group ( date,city,state, etc) using the documentation of fields.push..
Everytime a new pickup is added,I call a method that re-initalizes Materialize.
How do I get the event.target.name??
initializeMaterialCss(){
let pickupdate = document.querySelectorAll(".loadPickup");
let pickupdateInstance = M.Datepicker.init(pickupdate, {
onSelect: this.handleDate,
autoClose: true
});
}
I'm using the below on the Field, and then in the materialize callback, I update redux-form date property(redux-form change method) with the parameters from this react state, and the date value I get from materialize, but it feels hacky.
If there's a better more standard way, please enlighten me.
onFocus={event => this.setState({ focused: event.target.name })}
I am working on a dash board, that fetches data from acuity scheduling.
I am making a form and using a function to get list of radio button:
following array has it, just to clarify. It takes time to get the value in from the API so I have used setTimeout, in the function:
setTimeout(() => {
return timeForID.map( obj => {
return (<Radio value={obj.date}>{obj.hours}:{obj.mins}</Radio>);
})
}, 500)
I am getting a blank space in the place of radio buttons.
There are a lot of answers in JavaScript out there about working with the event loop and callbacks -- See: How do I return the response from an asynchronous call?
Essentially, your return inside of setTimeout doesn't go anywhere.
In order to trigger another render in your component, you will have to use setState. You can call setState after your API call completes -- you shouldn't have to use setTimeout. Let's say you're using fetch to get the API:
fetch(apiUrl).then(response => response.json()).then(dates => setState({ dates }))
Now in your render function you can have:
{this.state.dates.map(({ date, hours, mins }) => (
<Radio value={date}>{hours}:{mins}</Radio>
)}
Initialize the dates property of state to an empty array to prevent errors on the initial load.