Question
React I have a few styling issues with react datepicker, I have a calendar pop up and I want to adjust the following: Maybe create
React
I have a few styling issues with react datepicker, I have a calendar pop up and I want to adjust the following: Maybe create a CSS for datepicker??
Change the blue color of the chosen date to ##0068FF Can you increase the font size of the month slightly? Adjust the line-height of the month so it sits perfectly (vertically) within the arrows.
Here is the relevant code:
import "react-datepicker/dist/react-datepicker.css";
import dateformat from 'dateformat'
import {useState} from 'react'
import DatePicker from 'react-datepicker'
const [isOpen, setIsOpen] = useState(false);
const date = new Date(dateformat(dates.currentDate, "isoDate", true)+'T00:00:00.000');
const [theDate, setTheDate] = useState(date);
const handleChange = (e) => {
setIsOpen(!isOpen);
setTheDate(e);
const isoString = e.toISOString().substring(0,10);
history.push(`/${page}/${sport}/${isoString}`);
};
const handleClick = (e) => {
e.preventDefault();
setIsOpen(!isOpen);
};
{/* FFS DO NOT REMOVE THE HIDDEN ATTRIBUTE */}
{dateformat(dates.currentDate, "dddd, mmmm dS", true)}
{
setTheDate(dates.previousDate ? dates.previousDate : theDate)
if(dates.previousDate) {
history.push(`/${page}/${sport}/${dates.previousDate}`)
}
}} className={`enhanced-sports enhanced-sports-arrow-left4 mar-right-5`}/>
{
setTheDate(dates.nextDate ? dates.nextDate : theDate)
if(dates.nextDate) {
history.push(`/${page}/${sport}/${dates.nextDate}`)
}
}} className={`enhanced-sports enhanced-sports-arrow-right5 mar-left-5`} />
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started