JavaScript dla optymalizatorów: dodawanie selektora daty i godziny

Wszyscy tam byliśmy: frustrujące zadanie ręcznego dodawania daty w formularzu.

Teraz nie wiem jak wy, ale kiedy szukam formatu daty, mój mózg wpada w nadbieg. Czy zamierzasz wybrać MM/DD/RRRR? A jeśli zamiast tego chcemy RRRR-MM-DD? Ile dni znów ma luty?

W tym poście na blogu omówiono niektóre funkcje JavaScript, które pomogą zoptymalizować kod, dodając do formularzy pole wejściowe DateTime Picker.

Uzasadnienie biznesowe: dodawanie selektora daty i godziny

W tym hipotetycznym scenariuszu dochodzimy do następującej hipotezy:

Aby przetestować tę hipotezę, zastosujemy poniższe zmiany:

Kod użyty w eksperymencie

Przejdźmy teraz do zabawnej części!

Aby wprowadzić zmianę, uruchamiamy poniższy kod JavaScript na stronie testowej. Skopiuj kod i wypróbuj sam!

 var dateInput = document.querySelector("#data");
obsługiwana zmienna = prawda;
var test = document.createElement("wejście");
próbować {
  test.type = "data";
} złapać (e) {
  obsługiwane = fałsz;
}
jeśli (obsługiwane) {
  dateInput.setAttribute("typ", "data");
  dateInput.setAttribute("wartość", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
function getFormattedDate(changeYear) {
  var dzisiaj = nowa Data();
  var dd = String(dzisiaj.getDate()).padStart(2, "0");
  var mm = String(dzisiaj.getMonth() + 1).padStart(2, "0");
  var rrrr = dzisiaj.getFullYear() + zmianaRok;
  datasformatowana = rrrr + "-" + mm + "-" + dd;
  zwróć sformatowaną datę;
}

Podział Kodeksu

1. Nowa składnia

Podział zaczyna się od przejrzenia całej nowej składni w powyższym przykładzie. Ponieważ ten artykuł jest częścią serii, sprawdź pełną dokumentację składni w innych artykułach z tej serii (w tym w tym artykule opublikowanym na blogu Convert).

try {} catch (error) {} to instrukcja, której możesz użyć do wypróbowania określonego kodu i wyłapania błędów w razie potrzeby. Gdy kod zostanie uruchomiony i nie wystąpi żaden błąd, pominie połów.

Jeśli zwróci błąd, przechwyci go. Skrypt wykona teraz kod między treścią catch. Ponieważ przekazuje błąd w funkcji, można w pliku console.log znaleźć konkretny problem.

Zwykle, gdy napotkasz błąd, kod przestanie się wykonywać. Ta instrukcja pozwoli ci kontynuować pracę ze skryptem, gdy spodziewasz się błędu.

.type to metoda, która ustawia wartość atrybutu „type” elementu w DOM.

.getDate() to metoda zwracająca dzień obiektu daty. Zwróci dzień jako liczbę.

.padStart(targetLength, padString) to metoda, która pozwala nam dopełnić ciąg znaków innym znakiem o żądaną kwotę. Przekazujesz, ile razy chcesz uzupełnić ciąg w argumencie targetLength. Przekazujesz ciąg, który jest używany jako wypełnienie w argumencie padString. Podczas wypełniania zostanie uwzględniona długość padString.

.getMonth() to metoda zwracająca obiekt miesiąca daty jako liczbę. Zaczyna liczyć od 0, więc to będzie styczeń. Numer 11 będzie w grudniu.

String() to metoda, która próbuje przekonwertować przekazany argument na wartość ciągu. Ta metoda jest zwykle używana, gdy chcesz przekonwertować liczby na ciągi.

.getFullYear() to metoda zwracająca rok obiektu daty.

return jest powszechnym i ważnym stwierdzeniem podczas pracy z funkcjami. Czasami musisz uruchomić funkcję, aby pobrać dane i użyć ich w innym miejscu. Stan powrotu w funkcji zakończy wykonywanie funkcji i zwróci to, co jest prawidłowe w instrukcji.

2. Logika

 var dateInput = document.querySelector("#data");

Zaczynamy od wybrania pól wprowadzania daty za pomocą metody querySelector. Dodaliśmy id=”data” do naszego pola wejściowego, aby użyć #data jako naszego selektora. Przypisujemy element do naszej nowo zadeklarowanej zmiennej dateInput.

 obsługiwana zmienna = prawda;

Następnie deklarujemy obsługiwaną zmienną. Przypisujemy wartość logiczną do naszej nowo zadeklarowanej zmiennej. Zmienimy tę wartość później, jeśli przeglądarka nie obsługuje selektora daty i godziny.

 var test = document.createElement("wejście");

Musimy stworzyć pole wejściowe, którego użyjemy wyłącznie do sprawdzenia, czy ten typ jest obsługiwany. Robimy to za pomocą metody .createElement.

Przekazujemy „input” jako ciąg znaków, aby utworzyć element input. Zapisujemy ten element do nowo zadeklarowanej zmiennej testowej.

Użyjemy następującej instrukcji try, aby sprawdzić, czy nasza zmiana jest obsługiwana:

 próbować {

Zacznij od wpisania słowa kluczowego try. Oświadczenie otwieramy nawiasem klamrowym.

Funkcja spróbuje wszystkiego między tymi nawiasami. Po prostu uruchomi kod, aby sprawdzić, czy wystąpi błąd.

 test.type = "data";

Możemy sprawdzić, czy typ daty jest obsługiwany, ustawiając typ daty w naszym testowym polu wejściowym. Jeśli nie wystąpi żaden błąd, wiemy, że przeglądarka go obsługuje.

 } złapać (e) {

Następnie piszemy naszą instrukcję catch po nawiasie zamykającym. Część między nawiasami klamrowymi zostanie uruchomiona, gdy złapiemy błąd.

Umieszczając „e” jako argument, możemy użyć tego w naszej instrukcji catch. Możesz użyć tego na przykład do console.log określonego błędu.

 obsługiwane = fałsz;

Jeśli wykryjemy błąd, musimy zmienić obsługiwaną zmienną na false. Użyjemy tej wartości później, aby określić, czy chcemy wykonać zmianę, czy nie.

 }

Następnie zamknij instrukcję catch nawiasem zamykającym.

 jeśli (obsługiwane) {

Użyjemy wartości obsługiwanej zmiennej do uruchomienia instrukcji if. Jeśli zmienna ma wartość true, uruchomi instrukcję. W ten sposób upewniamy się, że przeglądarka nie jest nieobsługiwana.

 dateInput.setAttribute("typ", "data");

Aby dodać selektor daty i godziny, wystarczy dodać typ atrybutu z datą wartości do naszej zmiennej dateInput. W zależności od przeglądarki pokaże teraz ikonę, którą możesz kliknąć, aby wybrać daty.

 dateInput.setAttribute("wartość", getFormattedDate(0));

Chcemy również dodać domyślną datę do pola wejściowego. Domyślną datę pola daty można ustawić, dodając atrybut wartości, który przechowuje datę jako ciąg.

Użyj funkcji getFormattedDate, którą zdefiniowaliśmy, aby uzyskać dzisiejszą datę w odpowiednim formacie. Funkcja może dodawać lub usuwać lata, wprowadzając liczbę jako argument podczas jej wywoływania.

 dateInput.setAttribute("min", getFormattedDate(-1));

W ten sposób możemy użyć tego wiersza do ustawienia minimalnej daty selektora na 1 rok przed dniem dzisiejszym. Możesz to zrobić, przekazując -1 jako argument. Ograniczy to użytkownikowi możliwość wybrania daty, która przypada przed datą minimalną.

 dateInput.setAttribute("max", getFormattedDate(1));

Zrób to samo dla maksymalnej kwoty, jaką mogą wybrać użytkownicy. Ustaw maksymalny rok za rok od teraz, przekazując „1” jako argument.

 }

Zamknij instrukcję if nawiasem klamrowym. Ta zmiana będzie teraz widoczna w polu wejściowym.

Nadal musimy zdefiniować funkcję, która jest używana w naszej instrukcji if. Chcemy, aby ta funkcja zwracała datę w następującym formacie: rrrr-mm-dd.

 function getFormattedDate(changeYear) {

Aby osiągnąć ten wynik, zacznij od zdefiniowania słowa kluczowego function. Nadajemy naszej funkcji nazwę getFormattedDate.

Aby mieć trochę kontroli nad rodzajem zwracanej daty, jako argument ustaw changeYear.

Możemy użyć tego jako słowa kluczowego w treści funkcji, aby kontrolować, co jest przekazywane, gdy funkcja jest wywoływana.

 var dzisiaj = nowa Data();

Rozpocznij tę treść funkcji, tworząc nowy obiekt daty. Momentem utworzenia nowego obiektu daty będzie czas, który zostanie zapisany. Oznacza to, że możemy przypisać nasz nowy obiekt do nowo zadeklarowanej zmiennej dzisiaj.

 var dd = String(dzisiaj.getDate()).padStart(2, "0");

Metoda getDate pobiera dni naszej randki. Gdy dni są jednocyfrowe, doda 0 przed liczbą za pomocą metody padStart.

W przeciwnym razie byłby to zły format dla naszego pola wejściowego. Musimy również przekonwertować liczbę na łańcuch, aby móc później połączyć nasze liczby. W przeciwnym razie program użyje dodawania.

 var mm = String(dzisiaj.getMonth() + 1).padStart(2, "0");

Tutaj używamy getMonth, aby uzyskać miesiące z dzisiejszej daty. Dokonujemy niewielkiej korekty, dodając 1 do zwracanej liczby. Następnie uzupełniliśmy liczbę zerem, jeśli liczba jest jedną cyfrą. Ta metoda zapewnia, że ​​mamy odpowiedni format danych miesięcznych.

 var rrrr = dzisiaj.getFullYear() + zmianaRok;

Następnie otrzymujemy dzisiejszy rok metodą getFullyear. Użyj liczby przekazanej do funkcji, aby zmienić rok.

 datasformatowana = rrrr + "-" + mm + "-" + dd;

Następnie łączymy wszystkie nasze zmienne ze sformatowaną datą za pomocą konkatenacji ciągów.

 zwróć sformatowaną datę;

Zwracamy zmienną formattedDate, aby mogła być używana przez funkcję wywołującą.

 }

Na koniec zamykamy naszą funkcję nawiasem klamrowym i kończymy nasz skrypt. Skrypt może użyć tej funkcji przed jej zadeklarowaniem, ponieważ funkcje są przenoszone na początek kodu. To samo dzieje się ze zmiennymi. Kod może działać nieco szybciej, jeśli przeniesiesz funkcję formattedDate powyżej instrukcji if.

3. Ćwiczenia

Więc teraz, gdy masz już cały proces, wszystko, co pozostało, to wypróbowanie go. I nie zapomnij się z nim dobrze bawić!

Śmiało i zmień pole wejściowe, aby pole min zawierało datę, która przypada dokładnie za dwa lata od dzisiaj. Następnie dodaj maksymalną datę za dwa lata od teraz. Powodzenia!

Nie możesz tego rozgryźć? Wyślij mi wiadomość na LinkedIn, a pomogę Ci!

A jeśli przegapiłeś nasz ostatni artykuł, sprawdź, jak wstawić sekcję całkowitego rabatu w swojej witrynie i inne zaawansowane techniki optymalizacji konwersji.