예전에는 날짜 선택 도구를 표시하기 위해 맞춤 위젯 라이브러리나 꿀팁을 사용해야 했습니다. 이제 웹 플랫폼에는 날짜뿐만 아니라 시간, 색상, 파일까지 브라우저 선택 도구를 표시하는 표준 방법인 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()는 웹 플랫폼을 처음 사용합니다. 이 기능은 향후 추가 작업이 필요할 수 있습니다.
- 향후 웹 개발자가 요청하는 경우 유사한
showPicker()를<select>요소에 추가하는 것이 좋습니다. closePicker()가 유용할 수 있으며 웹 개발자가 요청하면 이를 추가할 수 있습니다.- 상위 체인에서 허용하는 경우 교차 출처 iframe이 브라우저 선택 도구를 표시하도록 허용하는 권한 정책을 추가할 수 있습니다.
의견
Chrome팀과 웹 표준 커뮤니티는 showPicker() 사용 경험에 관한 의견을 듣고자 합니다.
디자인에 대해 알려주세요.
showPicker()에서 기대한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요?
보안 모델에 대한 질문이나 의견이 있으신가요?
- WhatWG GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 관한 의견을 추가합니다.
구현에 문제가 있나요?
Chrome 구현과 관련된 버그를 발견했나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함해 주세요. Glitch는 쉽고 빠르게 재현을 공유하는 데 효과적입니다.
지원 표시
showPicker()을(를) 사용할 계획이신가요? 공개 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에게 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
@ChromiumDev로 트윗을 보내어 어디서 어떻게 사용하고 있는지 알려주세요.
유용한 링크
감사의 말씀
이 도움말을 검토해 주신 Joe Medley님께 감사드립니다. Unsplash의 Eric Rothermel님이 캘린더 이미지 사진입니다.