"도움이 되셨다면 공감과 댓글로 지지해주세요!!"
시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다.
input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 최대한 유사한 색감을 사용했다.
placeholder와 CSS 적용하였다.
처음 날짜 선택 전에 '날짜선택' placeholder를 주었다.
이를 위해서 몇가지 설정이 필요하다.
HTML
<input
type="date"
data-placeholder="날짜 선택"
required
aria-required="true"
value={startDateValue}
className={styles.selectDay}
onChange={StartDateValueHandler}
></input>
CSS
input[type='date']::before {
content: attr(data-placeholder);
width: 100%;
}
input[type='date']:focus::before,
input[type='date']:valid::before {
display: none;
}
"도움이 되셨다면 공감과 댓글로 지지해주세요!!"
'CSS' 카테고리의 다른 글
스마트폰 가상 키보드 활성화시에 UI Resize 현상 방지 (0) | 2022.04.13 |
---|---|
(CSS) Skeleton UI 제작 (0) | 2022.03.16 |
(CSS) CSS 선택자 (0) | 2022.02.18 |
(CSS) postion 속성 (feat. static, relative, absolute, fixed) (0) | 2022.02.18 |
(CSS) flexbox (feat. flex-direction 설정에 따른 차이) (0) | 2022.02.18 |