오랫동안 날짜 선택 도구를 표시하려면 맞춤 위젯 라이브러리 또는 해킹을 사용해야 했습니다. 이제 웹 플랫폼에는 날짜뿐만 아니라 시간, 색상, 파일의 브라우저 선택 도구를 표시하는 표준적인 방법인 HTMLInputElement showPicker() 메서드가 제공됩니다.
배경
웹 개발자로부터 자주 접수되는 요청은 다음과 같습니다.
날짜와 같은 컨트롤의 선택 도구를 프로그래매틱 방식으로 표시하려면 어떻게 해야 하나요?
Stack Overflow
현재의 해결 방법은 좋지 않습니다. 외부 라이브러리, CSS 해킹 또는 click()를 통한 사용자 상호작용 시뮬레이션과 같은 특정 브라우저 동작에 의존합니다.
웹 플랫폼에 "date", "month", "week", "time", "datetime-local", "color", "file" 유형으로 <input> 요소에 대한 브라우저 선택 도구를 표시하는 표준 방법이 도입됨에 따라 이러한 시기는 곧 끝날 것입니다. <datalist> 또는 "autocomplete"를 기반으로 하는 추천이 있는 <input> 요소에도 작동하며 이 도움말에서도 다룹니다.
선택 도구를 표시하는 방법
<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://show-picker.glitch.me/demo.html에서 데모를 확인하고 브라우저에서 지원하는 모든 선택 도구를 사용해 볼 수 있습니다.
브라우저 지원
showPicker() 버전은 Chrome 99 이상에서 사용할 수 있습니다.
다음 단계
이 글을 작성하는 시점에서 showPicker()는 웹 플랫폼에 새로 도입되었습니다. 향후 이 기능에 추가 작업이 필요할 수 있습니다.
- 향후 웹 개발자가 요청하는 경우
<select>요소에 유사한showPicker()를 추가할 수 있습니다. closePicker()가 유용할 수 있으며 웹 개발자가 요청하는 경우 추가를 고려할 수 있습니다.- 상위 체인이 허용하는 경우 교차 출처 iframe이 브라우저 선택 도구를 표시할 수 있는 권한 정책을 추가할 수 있습니다.
의견
Chrome팀과 웹 표준 커뮤니티는 showPicker() 사용 경험에 관한 의견을 기다리고 있습니다.
디자인에 대해 알려주세요.
showPicker()에 예상대로 작동하지 않는 문제가 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요?
보안 모델에 관해 질문이나 의견이 있으신가요?
- WHATWG GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 의견을 추가하세요.
구현에 문제가 있나요?
Chrome 구현에서 버그를 발견했나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 최대한 자세한 정보를 포함하고 재현 방법에 관한 간단한 안내를 제공해야 합니다. Glitch는 빠르고 쉬운 재현을 공유하는 데 효과적입니다.
응원하기
showPicker()을 사용할 계획인가요? 공개 지원은 Chrome팀이 기능의 우선순위를 정하고 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여주는 데 도움이 됩니다.
@ChromiumDev에 트윗을 보내 사용 중이신 위치와 방법을 알려주세요.