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 uciekać się do niestandardowych bibliotek widżetów lub hacków. 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 zgłaszany przez programistów internetowych:

Jak za pomocą kodu
wyświetlić selektor dla elementów sterujących, 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().

Cieszymy się, że te czasy wkrótce się skończą, ponieważ platforma internetowa wprowadza kanoniczny sposób wyświetlania selektora przeglądarki dla elementów <input> tych typów: "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", co również omawiamy w tym artykule.

Zrzuty ekranu z wybieraczami 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 funkcji showPicker() w elemencie <input> powoduje wyświetlenie użytkownikowi selektora przeglądarki. Musi być wywoływany w odpowiedzi na gest użytkownika, np. gest dotykowy lub kliknięcie myszką. W przeciwnym razie wywołanie zakończy się niepowodzeniem 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>

Wybór przeglądarki można też wstępnie wypełnić 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ługiwane, 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

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

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 projektowaniu

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 znalazłeś/znalazłaś błąd w implementacji 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 odtwarzania 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 do @ChromiumDev i powiedz nam, gdzie i jak z niego korzystasz.

Podziękowania

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