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

François Beaufort
François Beaufort
GitHub

Przez długi czas, aby wyświetlić selektor daty, trzeba było korzystać z niestandardowych bibliotek widżetów lub obejść ten problem. Platforma internetowa jest teraz dostarczana z metodą HTMLInputElement showPicker(), która jest kanonicznym sposobem wyświetlania selektora przeglądarki nie tylko w przypadku dat, ale także czasu, koloru i plików.

Tło

Często słyszymy od deweloperów stron internetowych prośbę:

Jak programowo
wyświetlić selektor elementów sterujących, takich jak data?

Stack Overflow

Obecne rozwiązania nie są najlepsze, ponieważ opierają się na bibliotekach zewnętrznych, obejściach CSS lub konkretnych zachowaniach przeglądarki, takich jak symulowanie interakcji użytkownika z elementem click().

Z przyjemnością informuję, że wkrótce to się zmieni, ponieważ platforma internetowa wprowadza kanoniczny sposób wyświetlania selektora przeglądarki dla elementów <input> o tych typach: "date", "month", "week", "time", "datetime-local", "color" i "file". Działa też w przypadku elementów <input> z sugestiami opartymi na <datalist> lub "autocomplete", o których również wspomnimy w tym artykule.

Zrzuty ekranu selektorów przeglądarek
Selektory dat w przeglądarkach Chrome na komputerach i urządzeniach mobilnych, Safari na komputerach i urządzeniach mobilnych oraz Firefox na komputerach (lipiec 2021 r.).

Jak wyświetlić selektor

Wywołanie funkcji showPicker() na elemencie <input> powoduje wyświetlenie selektora przeglądarki. Musi być wywoływana w odpowiedzi na gest użytkownika, np. dotknięcie lub kliknięcie myszą. W przeciwnym razie wywoła wyjątek NotAllowedError. Ze względów bezpieczeństwa w przypadku wywołania w elemencie iframe z innej domeny zgłosi wyjątek SecurityError.

Selektor przeglądarki jest wyświetlany, gdy element <input> jest jednym z tych typów: "date", "month", "week", "time", "datetime-local", "color" lub "file".

Poniższy przykład 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>

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

Z przykładu poniżej dowiesz się, jak otworzyć selektor przeglądarek 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 znak showPicker() jest obsługiwany, użyj tego kodu:

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

Prezentacja

Wersja demonstracyjna jest dostępna na stronie https://cdpn.io/web-dot-dev/fullpage/LEVKVdr. Możesz tam wypróbować wszystkie selektory obsługiwane przez przeglądarkę.

Obsługa przeglądarek

showPicker() jest dostępna w Chrome w wersji 99 lub nowszej.

Co dalej?

W momencie pisania tego artykułu interfejs showPicker() jest nowością na platformie internetowej. Funkcja może wymagać dodatkowych prac w przyszłości:

  • Jeśli deweloperzy stron internetowych o to poproszą, w przyszłości możemy dodać podobny element showPicker() do elementu <select>.
  • Możliwe, że closePicker() będzie przydatne, i możemy rozważyć dodanie tej funkcji, jeśli poproszą o to programiści stron internetowych.
  • Możemy dodać zasady dotyczące uprawnień, które zezwalają na wyświetlanie selektorów przeglądarki w ramkach iframe z innych domen, jeśli zezwala 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 związane z showPicker().

Opisz projekt

Czy w showPicker() coś nie działa tak, jak oczekujesz? Czy brakuje metod lub właściwości, które są potrzebne do realizacji Twojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń?

Masz problem z implementacją?

Czy w implementacji Chrome występuje błąd? 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 umożliwiające odtworzenie problemu.

Okaż wsparcie

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

Wyślij tweeta do @ChromiumDev i napisz, gdzie i jak korzystasz z tej funkcji.

Podziękowania

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