날짜, 시간, 색상, 파일의 브라우저 선택 도구 표시

François Beaufort
François Beaufort
GitHub

오랫동안 날짜 선택기를 표시하려면 맞춤 위젯 라이브러리나 해킹을 사용해야 했습니다. 이제 웹 플랫폼에는 날짜뿐만 아니라 시간, 색상, 파일에도 브라우저 선택기를 표시하는 표준 방법인 HTMLInputElement showPicker() 메서드가 제공됩니다.

배경

웹 개발자로부터 자주 받는 요청은 다음과 같습니다.

날짜와 같은 컨트롤의 선택기를 프로그래매틱 방식으로 표시하려면 어떻게 해야 하나요?

Stack Overflow

현재 답변은 좋지 않습니다. 외부 라이브러리, CSS 트릭 또는 click()와의 사용자 상호작용 시뮬레이션과 같은 특정 브라우저 동작에 의존합니다.

웹 플랫폼에서 "date", "month", "week", "time", "datetime-local", "color", "file" 유형의 <input> 요소에 브라우저 선택기를 표시하는 표준 방법을 도입하고 있으므로 곧 이러한 문제가 해결될 것입니다. 이 도움말에서는 <datalist> 또는 "autocomplete"에서 제공하는 추천이 있는 <input> 요소에 대해서도 다룹니다.

브라우저 선택기 스크린샷
Chrome 데스크톱, Chrome 모바일, Safari 데스크톱, Safari 모바일, Firefox 데스크톱의 브라우저 날짜 선택기 (2021년 7월)

선택 도구를 표시하는 방법

<input> 요소에서 showPicker()를 호출하면 사용자에게 브라우저 선택기가 표시됩니다. 터치 동작이나 마우스 클릭과 같은 사용자 동작에 대한 응답으로 호출해야 합니다. 그렇지 않으면 NotAllowedError 예외와 함께 실패합니다. 보안상의 이유로 교차 출처 iframe에서 호출되면 SecurityError 예외가 발생합니다.

<input> 요소가 "date", "month", "week", "time", "datetime-local", "color" 또는 "file" 유형 중 하나인 경우 브라우저 선택기가 표시됩니다.

아래 예에서는 브라우저 날짜 선택기를 여는 방법을 보여줍니다.

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

브라우저 선택기는 <datalist> 또는 "autocomplete"의 항목으로 미리 채워질 수도 있습니다.

아래 예에서는 <datalist>를 사용하여 브라우저 선택기를 여는 방법을 보여줍니다.

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

기능 감지

showPicker()가 지원되는지 확인하려면 다음을 사용하세요.

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

데모

브라우저에서 지원하는 모든 선택 도구를 사용해 볼 수 있는 데모는 https://cdpn.io/web-dot-dev/fullpage/LEVKVdr에서 확인할 수 있습니다.

브라우저 지원

showPicker()는 Chrome 99 이상에서 사용할 수 있습니다.

다음 단계

작성 시점을 기준으로 showPicker()는 웹 플랫폼의 새로운 기능입니다. 이 기능은 향후 추가 작업이 필요할 수 있습니다.

  • 웹 개발자가 요청하는 경우 향후 <select> 요소에 유사한 showPicker()를 추가할 수 있습니다.
  • closePicker()가 유용할 수도 있으며 웹 개발자가 요청하는 경우 이를 추가하는 것을 고려할 수 있습니다.
  • 상위 체인에서 허용하는 경우 교차 출처 iframe이 브라우저 선택기를 표시할 수 있도록 하는 권한 정책을 추가할 수 있습니다.

의견

Chrome팀과 웹 표준 커뮤니티는 showPicker() 사용 경험에 관한 의견을 듣고 싶습니다.

디자인에 대한 정보 제공

showPicker()이(가) 예상대로 작동하지 않는 부분이 있나요? 또는 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 궁금한 점이나 의견이 있으신가요?

구현에 문제가 있나요?

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?

  • https://new.crbug.com에서 버그를 신고하세요. 최대한 자세한 내용과 재현을 위한 간단한 안내를 포함해야 합니다.

지원 표시

showPicker()을 사용하실 계획인가요? 공개적인 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능 지원이 얼마나 중요한지 보여줍니다.

@ChromiumDev에 트윗을 보내 어디에서 어떻게 사용하고 있는지 알려주세요.

감사의 말씀

이 도움말을 검토해 주신 Joe Medley에게 감사드립니다. 캘린더 이미지 사진: 에릭 로더멜(Unsplash 제공)