JavaScript pentru optimizatori: adăugarea unui selector de date și oră

Am fost cu toții acolo: sarcina frustrantă de a adăuga manual data într-un formular.

Acum, nu știu despre tine, dar când caut formatul de dată, creierul meu intră în exces. Mergi pentru LL/ZZ/AAAA? Dacă vrem în schimb AAAA-LL-ZZ? Câte zile are din nou februarie?

Această postare de blog vă va ghida prin câteva funcții JavaScript care vă vor ajuta să vă optimizați codul prin adăugarea unui câmp de introducere DateTime Picker la formularele dvs.

Caz de afaceri: adăugarea unui selector de date și oră

În acest scenariu ipotetic, ajungem la următoarea ipoteză:

Pentru a testa această ipoteză, vom aplica modificările de mai jos:

Codul folosit în experiment

Acum să trecem la partea distractivă!

Pentru a executa modificarea, rulăm codul JavaScript de mai jos pe pagina de testare. Copiați codul și încercați-l singur!

 var dateInput = document.querySelector("#date");
var suportat = adevărat;
var test = document.createElement("input");
încerca {
  test.type = „data”;
} prinde (e) {
  susținut = fals;
}
dacă (suportat) {
  dateInput.setAttribute("tip", "data");
  dateInput.setAttribute("valoare", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
funcția getFormattedDate(changeYear) {
  var azi = data noua();
  var dd = String(today.getDate()).padStart(2, "0");
  var mm = String(today.getMonth() + 1).padStart(2, "0");
  var aaaa = azi.getFullYear() + changeYear;
  formattedDate = aaaa + "-" + mm + "-" + dd;
  return formattedDate;
}

Defalcarea Codului

1. Sintaxă nouă

Defalcarea începe prin a trece peste toată sintaxa nouă din exemplul de mai sus. Deoarece acest articol face parte dintr-o serie, asigurați-vă că verificați documentația completă a sintaxei în celelalte articole din serie (inclusiv acest articol publicat pe blogul Convert).

încercați {} catch (eroare) {} este o declarație pe care o puteți utiliza pentru a încerca un anumit cod și pentru a detecta erori, dacă este necesar. Când codul rulează și nu apare nicio eroare, va sări peste captură.

Dacă returnează o eroare, o va prinde. Scriptul va executa acum codul dintre corpul capturii. Deoarece trece eroarea în funcție, o puteți console.log pentru a găsi problema specifică.

De obicei, atunci când întâlniți o eroare, executarea codului se va opri. Această declarație vă va permite să continuați cu scriptul atunci când vă așteptați la o eroare.

.type este o metodă care setează valoarea atributului „tip” a unui element din DOM.

.getDate() este o metodă care returnează ziua unui obiect dată. Va returna ziua ca număr.

.padStart(targetLength, padString) este o metodă care ne permite să adăugăm un șir cu un caracter diferit pentru cantitatea pe care o dorim. Transmiteți de câte ori doriți să completați un șir în argumentul targetLength. Transmiteți șirul care este folosit ca umplutură în argumentul padString. Va ține cont de lungimea padString atunci când îl umpleți.

.getMonth() este o metodă care returnează obiectul luna datei ca număr. Începe să numere de la 0, așa că acesta va fi ianuarie. Numărul 11 ​​va fi decembrie.

String() este o metodă care încearcă să convertească argumentul care este transmis într-o valoare șir. Această metodă este de obicei folosită atunci când doriți să convertiți numere în șiruri.

.getFullYear() este o metodă care returnează anul unui obiect dată.

returnarea este o declarație comună și importantă atunci când lucrați cu funcții. Uneori trebuie să rulați o funcție pentru a obține date și a le folosi în altă parte. O stare de returnare într-o funcție va încheia execuția funcției și va returna orice este corect din instrucțiune.

2. Logica

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

Începem prin a selecta câmpurile de introducere a datei cu metoda querySelector. Am adăugat id="date" în câmpul nostru de introducere pentru a folosi #date ca selector. Atribuim elementul variabilei dateInput nou declarate.

 var suportat = adevărat;

Apoi declarăm variabila suportată. Atribuim valoarea booleană adevărată variabilei noastre nou declarate. Vom schimba această valoare mai târziu dacă browserul nu acceptă un selector de dată și oră.

 var test = document.createElement("input");

Trebuie să creăm un câmp de intrare pe care îl vom folosi exclusiv pentru a verifica dacă acest tip este acceptat. Facem acest lucru cu metoda .createElement.

Transmitem „input” ca șir pentru a crea elementul de intrare. Salvăm acest element în variabila de test nou declarată.

Vom folosi următoarea declarație de încercare pentru a verifica dacă modificarea noastră este acceptată:

 încerca {

Începeți prin a scrie cuvântul cheie try. Deschidem declarația cu o paranteză.

Funcția va încerca totul între aceste paranteze. Va rula codul pentru a vedea dacă apare o eroare.

 test.type = „data”;

Putem testa dacă tipul de dată este acceptat setând tipul de dată în câmpul nostru de introducere a testului. Dacă nu apare nicio eroare, știm că browserul o acceptă.

 } prinde (e) {

Apoi, scriem declarația noastră catch după paranteza de închidere. Partea dintre paranteze va rula atunci când descoperim o eroare.

Punând un „e” ca argument, îl putem folosi în declarația noastră catch. Puteți utiliza aceasta pentru a console.log eroarea specifică, de exemplu.

 susținut = fals;

Dacă descoperim eroarea, trebuie să schimbăm variabila suportată la false. Vom folosi această valoare mai târziu, pentru a stabili dacă vrem să executăm modificarea sau nu.

 }

Apoi, închideți declarația catch cu o paranteză de închidere.

 dacă (suportat) {

Vom folosi valoarea variabilei suportate pentru a rula o instrucțiune if. Dacă variabila este adevărată, va rula instrucțiunea. În acest fel, ne asigurăm că browserul nu este neacceptat.

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

Pentru a adăuga un selector de date și oră, trebuie pur și simplu să adăugăm tipul de atribut cu data valorii la variabila noastră dateInput. În funcție de browser, va afișa acum o pictogramă pe care puteți face clic pentru a selecta datele.

 dateInput.setAttribute("valoare", getFormattedDate(0));

De asemenea, dorim să adăugăm o dată implicită în câmpul de introducere. Puteți seta data implicită a unui câmp de dată adăugând un atribut valoare care deține data ca șir.

Utilizați funcția getFormattedDate, pe care am definit-o, pentru a obține data de astăzi în formatul corect. Funcția poate adăuga sau elimina ani introducând un număr ca argument atunci când îl apelați.

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

În acest fel, putem folosi această linie pentru a seta data minimă a selectorului la 1 an înainte de ziua de astăzi. Puteți face acest lucru trecând -1 ca argument. Acest lucru va restricționa utilizatorul să selecteze o dată care este înainte de data minimă.

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

Faceți același lucru pentru suma maximă pe care utilizatorii o pot selecta. Setați anul maxim într-un an de acum înainte, transmițând un „1” drept argument.

 }

Închideți declarația if cu o paranteză. Această modificare va fi acum vizibilă în câmpul de introducere.

Mai trebuie să definim funcția care este utilizată în declarația noastră if. Dorim ca această funcție să returneze o dată în următorul format: aaaa-ll-zz.

 funcția getFormattedDate(changeYear) {

Pentru a obține acest rezultat, începeți prin a utiliza cuvântul cheie al funcției pentru a defini unul. Dăm numele getFormattedDate funcției noastre.

Pentru a avea un pic de control asupra tipului de dată returnată, setați ca argument changeYear.

Putem folosi acesta ca cuvânt cheie în corpul funcției pentru a controla ceea ce este transmis atunci când funcția este apelată.

 var azi = data noua();

Porniți acest corp de funcție prin crearea unui nou obiect dată. Momentul în care este creat noul obiect dată va fi ora care este stocată. Aceasta înseamnă că putem aloca noul nostru obiect variabilei astăzi nou declarate.

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

Metoda getDate obține zilele datei noastre. Când zilele sunt cu o singură cifră, se va adăuga un 0 înaintea numărului cu metoda padStart.

În caz contrar, acesta ar fi formatul greșit pentru câmpul nostru de introducere. De asemenea, trebuie să convertim numărul într-un șir, astfel încât să ne putem concatena numerele mai târziu. În caz contrar, programul va folosi adăugarea.

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

Aici, folosim getMonth pentru a obține lunile datei de astăzi. Facem o mică corecție adăugând 1 la numărul care este returnat. Apoi, am completat numărul cu zero dacă numărul este o cifră. Această metodă asigură că avem formatul potrivit pentru datele lunii.

 var aaaa = azi.getFullYear() + changeYear;

În continuare, obținem anul de astăzi cu metoda getFullyear. Utilizați numărul transmis prin funcție pentru a schimba anul.

 formattedDate = aaaa + "-" + mm + "-" + dd;

Apoi, combinăm toate variabilele noastre la o dată formatată folosind concatenarea șirurilor.

 return formattedDate;

Returnăm variabila formattedDate, astfel încât să poată fi utilizată de apelantul funcției.

 }

În cele din urmă, închidem funcția noastră cu o paranteză și încheiem scriptul. Scriptul poate folosi această funcție înainte de a fi declarată, deoarece funcțiile sunt ridicate în partea de sus a codului. La fel se întâmplă și cu variabilele. Codul ar putea rula puțin mai repede dacă mutați funcția formattedDate deasupra instrucțiunii if.

3. Exercițiu

Așadar, acum că ai pregătit întregul proces, tot ce a mai rămas este să-l încerci. Și nu uita să te distrezi cu el!

Continuați și modificați câmpul de introducere, astfel încât câmpul min conține data care este exact doi ani de astăzi. Apoi, adăugați o dată maximă peste doi ani. Mult noroc!

Nu poți să-ți dai seama? Trimite-mi un mesaj pe LinkedIn și te voi ajuta!

Și în cazul în care ați ratat ultimul nostru articol, vedeți cum să inserați o secțiune cu reducere totală pe site-ul dvs. și alte tehnici avansate de optimizare a conversiilor.