[input] datetime-local 캘린더 css custom 하기

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	color: rgba(0, 0, 0, 0);
	opacity: 1;
	display: block;
	background: url(https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/calendar-16.png)
		center/80% no-repeat white; // 여기서 중앙정렬과 배경색을 준다.
	width: 20px;
	height: 20px;
	border-width: thin;
	cursor: pointer;
}

아이콘이 마음에 들지 않아 내가 찾아 수정한 것이고,

기본 베이스는 아래코드를 사용했다.

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
   color: rgba(0, 0, 0, 0); //숨긴다
   opacity: 1;
   display: block;
   background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat; // 대체할 아이콘
   width: 20px;
   height: 20px;
   border-width: thin;
}

https://blog.jaeyoon.io/2017/10/js-datepicker.html

Date Picker로 Date 값 저장하기

출처는 위에 적어두었다.

 

만약 위의 코드가 안먹힌다면 해당 태그에 클래스 명을 정의하여 그곳에 이름을 붙여 적용해라.

아무래도 위의 타입의 경우 전체 input값에 영향을 주다보니 추천하지 않는다.