Date picker

input type="date" 커스터마이징을 하게 된 배경
-모바일 환경에서는 input type="date"에서 기본 제공되는 placeholder와 달력 아이콘이 보이지 않음.
즉 PC와 모바일에서 보여지는 화면이 달라 통일성 필요.
-input type="date"는 제공되는 달력 아이콘을 클릭해서 날짜를 선택할 수 있는 달력이 열리기 때문에 클릭 범위를 input 전체 영역으로 넓히고 싶었음
-placeholder를 "연.월.일"이 아닌 다른텍스트로 변경하고 싶었고, 달력 아이콘도 다른 아이콘으로 변경하고 싶었음.

DatePicker.tsx

export const DatePicker = () => {
  return (
    <div className="date_picker">
      <input
        type="date"
        required
        aria-required="true"
        placeholder="날짜를 선택해주세요."
      
      />
    </div>
  );
};

DatePicker.scss

.date_picker {
  input[type="date"] {
    position: relative; // 캘린더 아이콘을 클릭해야만 달력이 보이기 때문에 이 영역 자체를 제어하기 위해 설정
    width: 100%;
    height: 48px;
    padding: 10px;
    background: url(../../../../../public/assets/icons/icon_calendar.svg)
      no-repeat right 10px center / 25px auto; // 배경에 커스텀 아이콘을 넣어주자! x축은 오른쪽에서부터 10px 떨어지게 하고, y축은 가운데 정렬하고, width 25px에 height auto라는 크기를 부여한다.
    text-align: left;
    font-size: 100%;
    background-color: var(--color-gray167);
  }

  // 실제 캘린더 아이콘을 클릭하는 영역을 의미하는 선택자
  // 이 영역을 확장해서 input의 어떤 곳을 클릭해도 캘린더를 클릭한 것과 같은 효과
  input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute; // 이를 설정하기 위해 사전에 relative를 설정한 것이다.
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent; // 배경은 투명하게,
    color: transparent; // 글자도 투명하게! 이 두 설정을 통해 캘린더 아이콘을 사라지게 만든다.
    cursor: pointer;
  }

  // type이 date인 input의 placeholder를 커스텀하기 위한 선택자
  // 기본적으로 type date인 input은 placeholder가 먹히지 않기 때문이다!
  input[type="date"]::before {
    content: attr(
      placeholder
    ); // input 태그의 placeholder라는 속성값을 가져와서 content로 사용한다. 보통은 placeholder보다는 data-placeholder라는 커스텀 속성을 만들어서 사용하시는 것 같다.
    width: 100%;
    height: 100%;
    line-height: 2;
    color: gray;
    text-align: left;
  }
  
  //날짜를 선택하지 않았을 때 자동으로 적용되는 placeholder를 없애기 위해 설정.
위 적용이 chrome 브라우저에서 먹히지 않아 추가로 설정했다.
  input[type="date"]:not(:focus):invalid {
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field {
      -webkit-appearance: none;
      display: none;
    }
  }

  // input에 어떠한 유효값이 입력된 상태인지 확인하는 선택자
  // 날짜를 선택하면 유효값이 입력된다.
  // 이 속성을 활용하고자 한다면 반드시 태그에 required 속성을 달아줘야한다.

  input[type="date"]:focus::before,
  input[type="date"]:valid::before {
    display: none; // 유효값이 입력된 경우 before에 있는 것을 사라지게 한다. 즉, placeholder를 사라지게 한다.
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field {
      -webkit-appearance: none;
      display: none;
    }
  }
}

참고사이트