Wyświetlaj selektor daty, godziny, koloru i plików w przeglądarce

François Beaufort
François Beaufort
GitHub

Przez długi czas do wyświetlania selektora daty trzeba było odwoływać się do niestandardowych bibliotek widżetów lub ataków hakerskich. Platforma internetowa zawiera teraz metodę HTMLInputElement showPicker(), która jest kanonicznym sposobem wyświetlania selektora przeglądarki nie tylko dla dat, ale też czasu, kolorów i plików.

Tło

Częsty problem, który zgłaszają nam deweloperzy stron internetowych:

Jak automatycznie
wyświetlać selektor opcji takich jak data?

Stack Overflow

Obecne odpowiedzi nie są najlepsze, ponieważ polegają na bibliotekach zewnętrznych, modyfikacjach kodu CSS lub określonych zachowaniach przeglądarki, takich jak symulowanie interakcji użytkownika z click().

Z przyjemnością informuję, że te dni miną, gdy platforma internetowa wprowadzi kanoniczny sposób wyświetlania selektora przeglądarki dla elementów <input> w tych typach: "date", "month", "week", "time", "datetime-local", "color" i "file". Funkcja ta będzie też działać w przypadku elementów <input> z supozycjami generowanymi przez <datalist> lub "autocomplete", o których również piszemy w tym artykule.

Zrzuty ekranu z wybierakami przeglądarek
Selektory dat w przeglądarce w Chrome na komputery, Chrome na urządzenia mobilne, Safari na komputery, Safari na urządzenia mobilne i Firefox na komputery (lipiec 2021 r.).

Jak wyświetlić selektor

Wywołanie showPicker() w elemencie <input> powoduje wyświetlenie użytkownikowi selektora przeglądarki. Musi zostać wywołana w odpowiedzi na gest użytkownika, np. gest dotykowy lub kliknięcie myszki. W przeciwnym razie nie powiedzie się z wyjątkiem NotAllowedError. Ze względów bezpieczeństwa wywołanie tej metody w elemencie iframe z innej domeny spowoduje wyjątek SecurityError.

Wyświetla się selektor przeglądarki, gdy element <input> jest jednym z tych typów:"date", "month", "week", "time", "datetime-local", "color" lub "file".

Przykład poniżej pokazuje, jak otworzyć selektor daty w przeglądarce.

<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>

Selektor przeglądarki może też być wstępnie wypełniony elementami z <datalist> lub "autocomplete".

Przykład poniżej pokazuje, jak otworzyć selektor przeglądarki za pomocą <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>

Wykrywanie cech

Aby sprawdzić, czy showPicker() jest obsługiwana, użyj:

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

Prezentacja

Wersję demonstracyjną znajdziesz pod adresem https://show-picker.glitch.me/demo.html. Możesz w niej wypróbować wszystkie selektory obsługiwane przez przeglądarkę.

Obsługa przeglądarek

Funkcja showPicker() jest dostępna w Chrome 99 i nowszych wersjach.

Co dalej?

W momencie pisania tego artykułu showPicker() jest nowością na platformie internetowej. W przyszłości może być konieczne dopracowanie tej funkcji:

  • Jeśli deweloperzy stron internetowych poproszą o to, w przyszłości możemy dodać podobny element showPicker() do elementu <select>.
  • Możliwe, że closePicker() może być przydatna, i możemy ją dodać, jeśli deweloperzy stron internetowych poproszą o to.
  • Możemy dodać zasady dotyczące uprawnień, które pozwolą iframe w innych domenach na wyświetlanie selektorów przeglądarki, jeśli ich łańcuch nadrzędny na to zezwala.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z użyciem showPicker().

Opowiedz nam o projekcie

Czy coś w showPicker() nie działa zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości potrzebnych do wdrożenia pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

Problem z implementacją?

Czy wystąpił błąd związany z implementacją Chrome? Czy implementacja różni się od specyfikacji?

  • Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtworzenia problemu. Glitch świetnie sprawdza się do udostępniania szybkich i prostych sposobów odtwarzania.

Pokaż pomoc

Czy planujesz używać showPicker()? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev, by poinformować nas, gdzie i jak go używasz.

Podziękowania

Dziękujemy Joe Medley za sprawdzenie tego artykułu. Zdjęcie kalendarza autorstwa Eric Rothermel z Unsplash.