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

François Beaufort
François Beaufort
GitHub

Przez długi czas trzeba było korzystać z niestandardowych bibliotek i hakerów widżetów, żeby wyświetlać selektor daty. Platforma internetowa korzysta teraz z metody HTMLInputElement showPicker(), czyli kanonicznego sposobu wyświetlania selektora przeglądarki nie tylko dla dat, ale też godziny, koloru i plików.

Wprowadzenie

Najczęstsze prośby zgłaszane przez programistów stron internetowych:

Jak automatycznie wyświetlać
selektor elementów, takich jak data?

Stack Overflow

Obecne odpowiedzi nie są zbyt dobre. Opierają się one na bibliotekach zewnętrznych, atakach CSS lub konkretnych zachowaniach przeglądarki, takich jak symulowanie interakcji użytkownika z click().

Z przyjemnością informuję, że to już koniec, gdy platforma internetowa wprowadzi kanoniczny sposób wyświetlania selektora przeglądarki dla elementów <input> z tymi typami: "date", "month", "week", "time", "datetime-local", "color" i "file". Działa też w przypadku elementów <input> z sugestiami opartymi na <datalist> lub "autocomplete", które omówimy również w tym artykule.

Zrzuty ekranu przedstawiające selektory przeglądarki
Selektory dat w przeglądarce w przeglądarce Chrome na komputerze, w przeglądarce mobilnej Chrome, w Safari na komputer, Safari na urządzeniu mobilnym i w Firefoksie na komputerze (lipiec 2021 r.).

Jak wyświetlić selektor

Wywołanie showPicker() w elemencie <input> wyświetla użytkownikowi selektor przeglądarki. Musi być wywoływane w odpowiedzi na gest użytkownika, np. gest dotknięcia lub kliknięcie myszą. W przeciwnym razie nie powiedzie się z wyjątkiem NotAllowedError. Ze względów bezpieczeństwa spowoduje to wywołanie wyjątku SecurityError w przypadku wywołania w elemencie iframe z innych domen.

Selektor przeglądarki wyświetla się, 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ą polecenia <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 funkcji

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

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

Demonstracyjny

Na stronie https://show-picker.glitch.me/demo.html dostępna jest wersja demonstracyjna, w której możesz wypróbować wszystkie selektory obsługiwane przez przeglądarkę.

Obsługiwane przeglądarki

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

Co dalej

W chwili tworzenia tego tekstu showPicker() korzysta z platformy internetowej po raz pierwszy. W przyszłości możemy potrzebować dodatkowych dopracowania:

  • W przyszłości możemy dodać do elementu <select> podobny showPicker(), jeśli będą o to prosić programiści stron internetowych.
  • Atrybut closePicker() może się przydać i warto dodać go, jeśli deweloperzy stron internetowych o nie poprosi.
  • Można dodać zasadę uprawnień, która zezwala elementom iframe z innych domen na wyświetlanie selektorów przeglądarek, jeśli pozwala na to ich łańcuch nadrzędny.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chcą poznać Twoje wrażenia z korzystania z usługi showPicker().

Opowiedz nam o projekcie

Czy w usłudze showPicker() jest coś, co nie działa zgodnie z Twoimi oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do realizacji pomysłu? Masz pytanie lub komentarz na temat modelu zabezpieczeń?

Problem z implementacją?

Czy wystąpił błąd w implementacji Chrome? A może wdrożenie różni się od specyfikacji?

  • Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtworzenia. Glitch to doskonały sposób na szybkie i łatwe udostępnianie kopii.

Okaż wsparcie

Czy zamierzasz używać usługi showPicker()? Twoja publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować te funkcje i pokazuje innym dostawcom, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev i daj nam znać, gdzie i jak używasz tego narzędzia.

Podziękowania

Dziękujemy Joe Medley za przeczytanie tego artykułu. Zdjęcie kalendarza: Eric Rothermel, Unsplash.