datepicker style 커스텀 + 토요일 일요일 색 바꾸기

굉장히 못난이었던..데이트피커 달력을 커스텀하여 바꿔봤다.ㅠㅠ

정말 하루 종일... 검색하고 찾아본 결과 완성했다..

비록 디자인과 약간 다르지만,,ㅠㅠ 똑같이 하고 싶었는데 라이브러리를 커스텀하기엔..쉽지 않았다..

 

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import DatePicker, { registerLocale } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import ko from 'date-fns/locale/ko';
import getYear from 'date-fns/getYear';
import getMonth from 'date-fns/getMonth';
import Icon from '../icon/base/Icon';

registerLocale('ko', ko);
const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
const OneDateRange = (props) => {
	const { startDate, onChange, endDate } = props;
	// 요일 반환
	const getDayName = (date) => {
		return date.toLocaleDateString('ko-KR', { weekday: 'long' }).substr(0, 1);
	};
	// 날짜 비교시 년 월 일까지만 비교하게끔
	const createDate = (date) => {
		return new Date(
			new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0),
		);
	};
	return (
		<>
			<DatePickerWrapper>
				<DatePicker
					minDate={new Date()}
					selected={startDate}
					onChange={onChange}
					startDate={startDate}
					endDate={endDate}
					selectsRange
					inline
					locale={ko}
					dateFormat={DATE_FORMAT}
					dateFormatCalendar={DATE_FORMAT_CALENDAR}
					popperPlacement='auto'
					dayClassName={(date) =>
						getDayName(createDate(date)) === '토'
							? 'saturday'
							: getDayName(createDate(date)) === '일'
							? 'sunday'
							: undefined
					}
					renderCustomHeader={({
						date,
						prevMonthButtonDisabled,
						nextMonthButtonDisabled,
						decreaseMonth,
						increaseMonth,
					}) => (
						<HeaderDateBox>
							<DateTitle>
								{getYear(date)}. {months[getMonth(date)]}
							</DateTitle>
							<BtnBox>
								<button
									onClick={decreaseMonth}
									disabled={prevMonthButtonDisabled}>
									<Icon.ArrowLeft
										size='12'
										color={prevMonthButtonDisabled ? '#ccc' : '#414141'}
									/>
								</button>
								<button
									onClick={increaseMonth}
									disabled={nextMonthButtonDisabled}>
									<Icon.ArrowRight size='12' color='#414141' />
								</button>
							</BtnBox>
						</HeaderDateBox>
					)}
				/>
			</DatePickerWrapper>
		</>
	);
};

export default OneDateRange;
const DATE_FORMAT = 'yyyy년 MM월 dd일';
const DATE_FORMAT_CALENDAR = 'yyyy년 MM월';

const DatePickerWrapper = styled.div`
	position: relative;
	display: flex;
	align-items: start;
	width: 100%;
	padding: 0 18px;
	height: 349px;
	background-color: #fff;
	box-sizing: border-box;
	z-index: 2;
	justify-content: center;
	&.react-datepicker-wrapper {
		width: 100%;
		display: block;
		background-color: #fff;
	}
	& .react-datepicker {
		width: 339px;
		border: none;
		display: block;
		height: 303px;
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
		border-radius: 14px;
		background-color: #fff;
	}
	& .react-datepicker__header {
		position: relative;
		width: 339px;
		height: 104px;
		border: none;
		padding: 20px 0 18px;
		border-radius: 14px 14px 0 0 !important;
		box-sizing: border-box;
		background-color: #fff;
	}
	& .react-datepicker__day {
		outline: none;
		font-weight: 400;
		font-size: 12px;
	}
	& .react-datepicker__day-names {
		white-space: nowrap;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 32px;
		box-sizing: border-box;
		padding: 0 6px;
		& > div.react-datepicker__day-name:first-child {
			color: #eb5c34;
		}
		& > div.react-datepicker__day-name:last-child {
			color: #868686;
		}
	}
	& .react-datepicker__week > .saturday {
		color: #868686;
	}
	& .react-datepicker__week > .sunday {
		color: #eb5c34;
	}
	& .react-datepicker__week {
		white-space: nowrap;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	& .react-datepicker__day-name,
	.react-datepicker__day,
	.react-datepicker__time-name {
		color: #000;
		width: 24px;
		height: 24px;
		line-height: 24px;
		margin-bottom: 6px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}
	& .react-datepicker-time__header {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	& .react-datepicker__day--outside-month,
	.react-datepicker__week > .saturday .react-datepicker__day--disabled,
	.react-datepicker__week > .sunday .react-datepicker__day--disabled {
		opacity: 0.7;
		color: #ccc !important;
	}
	& .react-datepicker__day--selected {
		background: #00ce7c !important;
		color: #fff !important;
		border-radius: 50% !important;
	}
	& .react-datepicker__day--outside-month {
		opacity: 0.7;
	}
	& .react-datepicker__day--in-range {
		background: rgba(213, 255, 238, 0.5);
		color: #000;
	}
	& .react-datepicker__day--in-range:hover {
		border: 1px solid #00ce7c !important;
		background: #fff !important;
		color: #000 !important;
		border-radius: 50% !important;
	}
	& .react-datepicker__day--in-selecting-range:hover,
	.react-datepicker__day--in-selecting-range {
		background: rgba(213, 255, 238, 0.5) !important;
		color: #000 !important;
	}
	&.react-datepicker__day:hover {
		background: rgba(213, 255, 238, 0.5) !important;
		color: #000 !important;
	}
	& .react-datepicker__day--keyboard-selected:hover {
		background: var(--color-green) !important;
		color: #fff;
	}
	& .react-datepicker__day--keyboard-selected {
		background: #00ce7c !important;
		color: #fff !important;
		border-radius: 50% !important;
	}
`;
const HeaderDateBox = styled.div`
	display: flex;
	padding: 0 16px;
	box-sizing: border-box;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 23px;
`;
const DateTitle = styled.div`
	font-weight: 500;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: 0.02em;
	width: 100px;
	height: 26px;
	color: #000000;
`;
const BtnBox = styled.div`
	width: 48px;
	height: 24px;
	display: flex;
	& > button {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: end;
	}
`;

 

공부 또 공부닷!