I am using material-UI datepicker which i followed the procedure but on event handler the date is not changing but the initial value is working fine which i give in useState. I want my datepicker to work smooth when i want to select my desire date. The example of Datepicker is also in the link
https://material-ui.com/components/pickers/#date-time-pickers
https://codesandbox.io/s/z9k3z
import {
KeyboardDatePicker,
MuiPickersUtilsProvider,
} from "#material-ui/pickers";
import DateFnsUtils from "#date-io/date-fns";
import React, { useState } from "react";
function AddCar() {
const [date, setDate] = useState(new Date());
const addCar = (e) => {
e.preventDefault();
console.log(date.toLocaleDateString());
setDate(new Date());
};
return (
<div className="addCar">
<div>
<form className="addCar__form" onSubmit={addCar}>
{/* Date */}
<div className="addCar__mainForm row ">
<div className="col-lg-3 col-md-6 col-sm-12 my-2">
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM-dd-yyyy"
margin="normal"
label="Select Date"
value={date}
onChange={(e) => setDate(date)}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
</div>
</div>
<button type="submit" className="btn btn-success">
ADD CAR
</button>
</form>
</div>
</div>
);
}
export default AddCar;
You keep setting the same date from state.
const [date, setDate] = useState(new Date());
// ...
onChange={(e) => setDate(date)}
It should be:
onChange={(e) => setDate(e)}
The first parameter in DatePicker's onChange callback is the new date you've just input.
change this line
onChange={(e) => setDate(date)}
to
onChange={setDate}
Codesandbox: https://codesandbox.io/s/material-demo-forked-siueb?file=/addCar.js:939-957
You need to set the value like
onChange={(e) => setDate(e)}
Also, You don't need to set the state like this:
const [date, setDate] = useState(new Date());
Related
I am trying to build a booking app using react and for some reason when the user changes the state it is not re rendering the correct amount in the UI.
If I console.log() the value of guests this is not going below 0 as wanted, however the UI is not displaying the correct amount. Any suggestions ?
import React, { useEffect, useState } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import HotelDetails from './hotelDetails'
import '../styles/searchBar.css';
let linkStyle = { textDecoration: "none", color: "black" };
const SearchBar = (props) => {
const navigate = useNavigate()
const todaysDate = new Date();
let tomorrow = new Date(todaysDate);
tomorrow = tomorrow.setDate(tomorrow.getDate() + 1);
const [location, setLocation] = useState('');
const [startDate, setStartDate] = useState(todaysDate); // set check in date to todays date
const [endDate, setEndDate] = useState(tomorrow); // set check out date, default tomorrow
const [guests, setGuests] = useState(0);
const [properties, setProperties] = useState([]);
// debug
console.log('check in', startDate);
console.log('check out', endDate);
console.log('todays date', todaysDate);
console.log('guests', guests);
function handleCheckInDate(e) {
setStartDate(e)
}
function handleCheckOutDate(e) {
setEndDate(e)
}
useEffect(() => {
fetch(`http://localhost:5000/hotels/${location}`).then((response) => {
response.json().then((data) => {
setProperties(data);
})
})
if (guests <= 0) {
setGuests(0);
// It does not re render in the input field
}
if (endDate <= startDate) {
alert('Please select a date after your check in date');
setEndDate(tomorrow);
}
}, [location, startDate, endDate, setEndDate, setStartDate, guests, setGuests])
return (
<>
<div className='bar'>
<h2 className='subtitle'>Find your perfect stay...</h2>
<div className='searchBar'>
<div className='field'>
<input type='text' className='input' placeholder='Where to ?' onChange={(e) => setLocation(e.target.value)} required />
</div>
<p>Check in</p>
<div className='field'>
{<input type='date' className='input' placeholder={todaysDate} onChange={(e) => /*setStartDate(e.target.value)*/ handleCheckInDate(e.target.value)} required />}
</div>
<p>Check out</p>
<div className='field'>
{<input type='date' className='input' placeholder={tomorrow} onChange={(e) => /* setEndDate(e.target.value)*/ handleCheckOutDate(e.target.value)} required />}
</div>
<div className='field'>
<input type='number' className='input' placeholder='Number of guests' onChange={(e) => setGuests(e.target.value)} required />
</div>
.....
You're setting the state to reflect the input changes, but you also need to go the other way around - you need to configure the input to reflect the state. Otherwise, the state value isn't doing anything. You need
<input
type='number'
className='input'
placeholder='Number of guests'
onChange={(e) => setGuests(e.target.value)}
value={guests}
required
/>
But a better approach would be to use .valueAsNumber so that you set a number instead of a string to state, and to take the maximum of the current value and 0, instead of putting the logic in useEffect. You might also want to account for non-integer numbers.
<input
type='number'
className='input'
placeholder='Number of guests'
onChange={(e) => {
// .valueAsNumber isn't strictly needed if calling Math.max here
setGuests(Math.max(0, e.target.valueAsNumber));
}}
value={guests}
required
/>
I want to create a calendar like this.
The Issue is I don't know how to add Apply and Cancel button in It. I have tried multiple solutions, But failed to get desired solution.
Through this block of code of I got this.
Kindly help me to add Button in react-datepicker.
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
const [startDate, setStartDate] = useState(new Date())
<DatePicker
selected={startDate}
className='w-[210px] p-3 text-sm font-[Inter-Regular] outline-none text-black-100 '
onChange={(date) => {
setStartDate(date as SetStateAction<Date>)
}}
showYearPicker
dateFormat='yyyy'
yearItemNumber={20}
/>
You can pass the buttons to the datepicker widget as children.
Both are closing the modal using the datepicker widget's api.
We have access to the api through a ref we assign to the widget.
The cancel button just set the date to the original[1] date.
const originalDate = new Date(); // or get it as prop
const [startDate, setStartDate] = React.useState(originalDate);
const calRef = React.useRef();
return (
<DatePicker
ref={calRef}
selected={startDate}
shouldCloseOnSelect={false}
onChange={(date) => setStartDate(date)}
showYearPicker
dateFormat="yyyy"
yearItemNumber={20}
>
<div>
<button
onClick={() => {
setStartDate(originalDate);
calRef.current.setOpen(false);
}}
>
Cancel
</button>
<button
onClick={() => {
calRef.current.setOpen(false);
}}
>
Apply
</button>
</div>
</DatePicker>
);
https://stackblitz.com/edit/react-datepicker-footer-buttons?file=App.tsx
[1] original - in your example it would be today but if the component receives it as prop, it can be it too
I have a form in this i create date picker field, i set by default as using new Date() its working fine. But when i select any date i am getting this error.
when i am using {TextField} component then it works fine but i can't set default value as a current date thats why i use {KeyboardDatePicker}.
**this is my console:-
check this image
This my form:-
import { Route, Routes, useNavigate } from "react-router-dom";
import axios from "axios";
import { KeyboardDatePicker} from '#material-ui/pickers';
export default function DonorForm ({showForm}) {
const current = new Date();
const dateNew = `${current.getMonth()+1}/${current.getDate()}/${current.getFullYear()}`
// console.log(dateNew,"<<<---checking new Date")
const [donors, setDonors] = useState({
donateDate:dateNew
});
let name, value;
const handleInputs = (e) => {
name = e.target.name;
value = e.target.value;
setDonors({...donors, [name]: value });
};
const onclick = async (e) => {
const {donateDate } =
donors;
try {
const config = {
header: {
"Content type": "appication/json",
},
};
const { data } = await axios.post(
"http://localhost:4000/donorsform",
{donateDate},
config
);
console.log(data);
localStorage.setItem("donorsInfo", JSON.stringify(data));
navigate("/coordinators/myprojects");
} catch (error) {
setError(true);
}
};
return(
<>
<div className="card-header ">
<h3 className="card-title my-1">Donor Details</h3>
</div>
<form
onSubmit={handleSubmit(onclick)}
method="POST"
className="form-horizontal "
id="register-form"
>
<div className="card-body">
<div className="row">
<div className="form-group">
<label className="form-label col">Date</label>
<div>
<KeyboardDatePicker
autoOk
variant="inline"
inputVariant="outlined"
name="donateDate"
format="DD/MM/YYYY"
value={donors.donateDate}
InputAdornmentProps={{ position: "start" }}
onChange={handleInputs}
/>
</div>
</div>
</div>
</div>
<div className="card-footer">
<button type="submit" className="btn-hover-1 color-3">
Submit
</button>
</div>
</form>
</>
);
};
How can i solve this problem Plzz help me.
Thank you!!!
According with the documentation, the onChange of the KeyboardDatePicker doesn't receive and event, it receives a Date, so maybe you should separate the implementation for managing this specific input:
<KeyboardDatePicker ...
onChange={handleDateChange} />
const handleDateChange = (date) => {
setDonors({...donors, donateDate: date }); ...
I am using Material Ui DateTime picker in a form. After submitting the form, I get the following error:
Invalid Date Format
Image
I am using JSON Server in my react app for saving data.
This is the output Element for the DateTime picker on DOM.
<input aria-invalid="false" readonly="" type="text" class="MuiInputBase-input MuiInput-input" value="March 16th 08:50 a.m.">
This is data on db.json.
{
"text": "study",
"day": "2022-03-16T05:20:00.000Z",
"reminder": true,
"id": 1
}
This is my code for Add date.
import { useState } from "react";
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider } from "#material-ui/pickers";
import "date-fns";
import { DateTimePicker } from "#material-ui/pickers";
const AddTask = ({ onAdd }) => {
const [day, setDay] = useState(new Date());
const onSubmit = (e) => {
e.preventDefault();
onAdd({ day });
setDay("");
};
return (
<form className="add-form" onSubmit={onSubmit}>
<div className="form-control">
<label>Day & time</label>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
disableToolbar
variant="inline"
value={day}
onChange={(day) => {
setDay(day);
}}
autoOk
/>
</MuiPickersUtilsProvider>
</div>
</form>
);
};
I would appreciate it if you help me. Thanks
It will probably not break if you remove the setDay(""); line from onSubmit. Why do you need it after all?
So I am following the tutorial "React JS Crash Course 2021" by Brad Traversy and am setting up a function that adds a task to the main app.
I keep getting this error :
Error: AddTask(...): Nothing was returned from render.
This usually means a return statement is missing. Or, to render nothing, return null.
I don't know why this error is coming or what it means, so If someone could help me understand it and what part of the code is leading to it that would be appreciated
the code:
AddTask.js
import { useState } from 'react'
const AddTask = () =>{
const [text, setText] =useState('')
const [day, setDay] =useState('')
const [reminder, setReminder] =useState('false')
const onSubmit = (e) => {e.preventDefault()
if (!text){
alert('Please enter task text')
return
}
}
return (
<form className="add-form">
<div className="form-control">
<label>Task</label>
<input type="text" placeholder="Add Task"
value={text} onChange ={
(e) => setText(e.target.value)
}/>
</div>
<div className="form-control">
<label>Day and time</label>
<input type="text" placeholder="Add day and time"
value={day} onChange ={
(e) => setDay(e.target.value)
}/>
</div>
<div className="form-control form-control-check">
<label>Set Reminder</label>
<input type="checkbox"
value={reminder} onChange ={
(e) => setReminder(e.currentTarget.checked)
}/>
</div>
<input type ="submit" value ="save task" className="btn btn-block"/>
</form>
);
}
export default AddTask
Main App
import Header from "./components/Header";
import Tasks from "./components/Tasks";
import AddTask from "./components/AddTask";
import { useState } from 'react'
function App() {
const [tasks, setTasks] = useState ([{id:1,
text: 'Doctors Appointment',
day:'Feb 5 3:30 pm',
reminder: true,
},
{id:2,
text: 'Meeting at School',
day:'Feb 9 2:30 pm',
reminder: true,
},
{id:3,
text: 'Groceries',
day:'Feb 10 11:30 am',
reminder: false,
}]
)
//
const AddTask =(task) =>{
console.log(task)
}
// delete
const deleteTask = (id) =>{
setTasks(tasks.filter((task) => task.id !==id))
}
// Toggle Reminder
const toggleReminder = (id)=>{
setTasks(tasks.map((task)=>task.id===id ? {...task, reminder:!task.reminder}:task))
console.log(tasks)
}
return (
<div className="container">
<Header />
<AddTask onAdd={AddTask}/>
{tasks.length > 0 ? <Tasks tasks={tasks} onDelete ={deleteTask} onToggle ={toggleReminder}/>:'no tasks to show'}
</div>
);
}
export default App;
The problem is that you have declared a function called AddTask in App component, which overwrites the component AddTask from the scope
Change its name to a lower case value and it will work
const addTask =(task) =>{
console.log(task)
}
P.S. Javascript does automatic semicolon insertion and sometimes it can sometimes lead to unexpected results. Make sure you add semicolon after every statement to be safe