Motivația

• Numerele săptămânii. Lucrez cu mulți clienți din industria agriculturii unde numerele săptămânii sunt folosite tot timpul, probabil mai des decât datele, de fapt.
• Variante. Uneori este logic să afișați un calendar lunar complet pe pagină. Poate chiar două luni. Uneori este un drop-down. Uneori există și un timp. Uneori există doar un timp. Posibilitatea de a utiliza același control în diferite variante ajută la furnizarea unei experiențe consecvente pentru utilizator și are ca rezultat mai puține dureri de cap ca dezvoltator.
• Restricții. Este important să existe un interval de început/sfârșit pentru datele selectabile, dar deseori este necesar să se poată furniza componentei o listă de date disponibile și ca componenta să indice utilizatorului datele disponibile pentru a fi selectate.
• Selecții. Flexibilitatea de a putea selecta o dată individuală, date multiple sau un interval este importantă, dar simplificarea este la fel de importantă.
• Teme. Componenta trebuie să se potrivească vizual cu restul proiectului. Proiectele mele folosesc în mod obișnuit CSS pentru lucrul cu tema, deci puncte bonus dacă pot fi tematice cu ușurință cu CSS. Dar chiar pe listă ar trebui să ofere câteva opțiuni pentru temele ubicue luminoase și întunecate și nu ar trebui să iasă în evidență de restul proiectului.

Fiecare dintre componentele de selectare date și oră incluse menționate mai devreme a fost scurtă într-un fel sau altul. Este probabil posibil ca fiecare să fie extins pentru a adăuga o caracteristică sau două lipsă. Dar niciunul nu a fost suficient de aproape pentru a face din aceasta o opțiune atractivă. O căutare rapidă pentru `datetimepicker` pe GitHub m-a adus la FlatPickr, care oferă toată această funcționalitate și multe altele. Dar există mulți selecționatori de date și oră acolo. Dacă FlatPickr sau una dintre componentele incluse nu funcționează pentru situația dvs., probabil că există altul care funcționează.

Fără TDateTimp de pierdut

Începerea cu FlatPickr urmează aceiași pași ca toate celelalte biblioteci JS pe care le-am acoperit până acum. Doar adăugați un link către fișierul dvs. Project.html direct sau utilizați Managerul bibliotecii JavaScript care poate fi găsit în IDE-ul Delphi. FlatPickr este destul de popular, așa că găsirea acestuia la CDN-ul tău preferat nu va fi o problemă. Iată ce vom folosi pentru acest articol și în proiectul exemplu.

După cum am menționat de mai multe ori anterior, alegerea utilizării unei legături CDN față de o copie găzduită local a acestor fișiere depinde de mulți factori. În acest caz, FlatPickr este utilizat pe scară largă și în curs de dezvoltare activă. O versiune recentă a spart o funcționalitate care, deși nu este critică pentru utilizarea sa, a afectat mai mult decât câțiva dintre utilizatorii săi. Dar s-a rezolvat în doar câteva ore. Dacă acest tip de scenariu te înspăimântă sau nu, probabil că va cântări foarte mult dacă să folosești sau nu un CDN.

La fel ca multe dintre bibliotecile Control JS pe care le vom acoperi, FlatPickr își face treaba atașându-se la un element de pe pagină. În acest caz, este convenabil să utilizați doar un control TWebEdit. Pentru acest prim pas, am lăsat unul pe un formular și apoi am setat proprietățile ElementID și Name să fie DatePicker1, am șters valoarea pentru Text și am stabilit TextHint la „Select Date”. Pentru a conecta această componentă la FlatPickr, am adăugat următoarele la procedura WebFormCreate a formularului.

 asm
var flatpickr1 = flatpickr('#DatePicker1', {});
Sfârşit;

#DatePicker1 se referă, desigur, la ElementID care a fost setat pentru componenta TWebEdit . Alți selectoare pot fi, de asemenea, utilizați dacă vă aflați într-o situație în care ElementID nu funcționează deosebit de bine. Vom acoperi, de asemenea, acea variabilă flatpickr1 într-un moment. Dar doar pentru a începe, este tot ce avem nevoie pentru ca FlatPickr să funcționeze cu toate setările sale implicite. Apare TWebEdit și, dacă dați clic pe el, apare un meniu derulant de calendar și populează TWebEdit cu data selectată.

FlatPickr implicit atașat la un TWebEdit

În configurația sa implicită, este mai degrabă un selector de dată decât un selector de dată și oră. Și singura modalitate de a selecta o dată este din meniul drop-down, nu este permisă introducerea textului. Dar acestea sunt toate lucrurile pe care le putem ajusta.

Avem Opțiuni

În codul de mai sus, FlatPickr a fost configurat fără opțiuni, ceea ce reprezintă {}. Există, desigur, multe opțiuni, iar site-ul FlatPickr face o treabă minunată de a le prezenta clar cu multe exemple. Vom acoperi o mână aici, dar asigurați-vă că consultați site-ul lor pentru toate detaliile, mai ales dacă nu sunteți total dedicat ISO8601 în ceea ce privește formatele de dată și oră.

Opțiunile pot fi furnizate fie când o instanță FlatPickr este inițializată pentru prima dată, fie apelând ulterior funcția FlatPickr set(). Vom avea exemple pentru ambele în timp util, dar prima opțiune pe care vom dori să o încercăm este suportul pentru numărul săptămânii. Schimbați codul de mai sus pentru a arăta astfel.

 asm
var flatpickr1 = flatpickr('#DatePicker1', {weekNumbers: true});
Sfârşit;

Și gata, numerele săptămânii sunt activate. Nu se pot selecta și nu fac altceva decât să stea acolo și să arate frumos, dar este suficient pentru moment.

Numerele săptămânii sunt activate

Multe alte opțiuni pot fi specificate în același mod, dar înainte de a ajunge la acestea, doar câteva gânduri despre acest tip de parametri și bibliotecile JS în general. Acest lucru este destul de comun în ceea ce privește trecerea unor lucruri precum opțiunile de configurare în codul JavaScript. Odată ce începeți să acumulați numeroase opțiuni, fiecare cu propriile subopțiuni, începe să arate puțin ca JSON. Dar, foarte specific, nu este JSON. Este un obiect JavasScript. Care este diferența? JSON nu înseamnă JavaScript Object Notation? Ei bine, vom intra în detalii altă dată, dar principalul lucru de știut este că aceste tipuri de opțiuni sunt de obicei perechi cheie/valoare și cheia nu este în mod special înconjurată de ghilimele duble. Prin urmare, imediat nu este JSON, ceea ce necesită ghilimele duble în jurul tastelor sale. Acest lucru poate părea un fel de chestie neplăcută, dar ceva de reținut.

La fel ca și restul JavaScript, majoritatea lucrurilor de aici sunt foarte sensibile la majuscule și minuscule . Deci WeekNumber , weeknumber și Weeknumber nu vor funcționa, doar weekNumber . Și așa sunt de obicei numite astfel de lucruri. Când există mai multe cuvinte, primul nu este scris cu majuscule, dar fiecare cuvânt ulterior este scris. Partea valoare a perechilor cheie/valoare poate fi lucruri simple precum adevărat sau fals sau un număr sau un șir ghilimeleu. Dar ele pot fi, de asemenea, matrice sau grupuri imbricate de valori, așa cum vom vedea când vom ajunge la specificarea anumitor date selectabile pentru FlatPickr. Și, în sfârșit, aceste perechi cheie/valoare sunt de obicei separate prin virgulă. Ceea ce nu este deosebit de interesant, dar bine de știut când lista de opțiuni devine atât de lungă încât trebuie să derulați pentru a vedea de unde începe. Și opțiunile disponibile sunt, fără a fi surprinzător, unice pentru fiecare bibliotecă sau proiect JavaScript. Asigurați-vă că vă uitați la versiunea documentației care se potrivește cu versiunea codului pe care o utilizați, deoarece aici se fac frecvent modificări.

Pentru a reproduce ceea ce majoritatea oamenilor s-ar putea aștepta de la un simplu selector de dată și oră, să activăm posibilitatea de a edita data direct tastând în câmpul TWebEdit și, de asemenea, să activăm unele dintre funcțiile legate de timp. Putem seta data/ora implicită să fie data/ora curentă – în mod normal, ora este implicită la prânz. Lucrurile devin deja puțin mai complicate, dar deloc nebunești.

 asm
var data = data noua;
var flatpickr1 = flatpickr('#DatePicker1', {
allowInput: adevărat,
defaultDate: data,
enableTime: adevărat,
enableSeconds: adevărat,
time_24hr: adevărat,
weekNumbers: adevărat
});
Sfârşit;

Acest lucru ne oferă următoarele, unde acum putem introduce în câmp dacă dorim, iar ora este editabilă atât în câmpul TWebEdit , cât și sub calendar. Există mai multe opțiuni legate de oră, cum ar fi hourIncrement și minuteIncrement care controlează comportamentul săgeților sus/jos care apar atunci când ora este editată.

FlatPickr ca selector de date și oră

Data selectată este stocată în câmpul de text al TWebEdit , așa că în acest caz o putem obține de la Delphi doar folosind DatePicker1.Text . Nicio problemă. Dar rețineți cu atenție că acesta este un câmp text și nu o valoare TDateTime. De asemenea, ar putea dori să știm când s-a schimbat valoarea.

Funcțiile parametrilor

Mediile de programare de tot felul au de mult timp mecanisme pentru funcțiile de apel invers – funcții care sunt apelate ori de câte ori are loc un eveniment de un fel. În JavaScript, acest lucru se întâmplă tot timpul, adesea în moduri creative și uneori în moduri confuze. Și acele obiecte JavaScript despre care tocmai vorbeam? Acei parametri pot fi numere sau șiruri de caractere sau matrice, dar pot fi și funcții JavaScript. Ceva care va fi puțin mai dificil de gestionat folosind proprietățile Delphi IDE. Pentru a arăta acest lucru în acțiune, să presupunem că dorim să limităm datele disponibile la +/- 3 zile de la data curentă. Și să facem, de asemenea, ceva simplu, cum ar fi trimiterea datei selectate în console.log() ori de câte ori data este schimbată.

 asm
var data = data noua;
var flatpickr1 = flatpickr('#DatePicker1', {
allowInput: adevărat,
defaultDate: data,
enableTime: adevărat,
enableSeconds: adevărat,
time_24hr: adevărat,
WeekNumbers: adevărat,
onChange: function(selectedDates, dateStr, instance) {
console.log(selectedDates)
},
enable: [ function(data) {// return true to enable
var d = data noua;
return (date.getDate() >= (d.getDate() - 3)) && (date.getDate() <= (d.getDate() + 3))
}]
});
Sfârşit;

Rezultatul este că numai datele care returnează adevărate în apelul de funcție atașat la activare sunt disponibile pentru selecție în componenta FlatPickr. Ori de câte ori selecția este modificată, valoarea este afișată conform așteptărilor. Dar, spre deosebire de valoarea DatePicker1.Text, acesta este un obiect JavaScript datetime real.

Date activate după funcție

Toate acestea se fac în JavaScript. Deci, să vedem dacă putem muta o parte din ea în partea Delphi. Pentru început, vom schimba parametrul onChange pentru a apela o funcție Delphi în loc de doar console.log() . În acest caz, parametrii disponibili din onChange sunt selectați Date , DateStr și instance . Deci, să setăm un apel la o procedură Delphi ca aceasta.

 asm
var data = data noua;
var flatpickr1 = flatpickr('#DatePicker1', {
allowInput: adevărat,
defaultDate: data,
enableTime: adevărat,
enableSeconds: adevărat,
time_24hr: adevărat,
WeekNumbers: adevărat,
onChange: function(selectedDates, dateStr, instance) {
var d = data noua;
pas.Unit1.Form1.FlatPickrChanged(selectedDates, dateStr, instance, d.getTimezoneOffset())
},
enable: [ function(data) {// return true to enable
var d = data noua;
return (date.getDate() >= (d.getDate() - 3)) && (date.getDate() <= (d.getDate() + 3))
}]
});
Sfârşit;

De asemenea, va trebui să abordăm diferențele în modul în care datele și orele sunt gestionate între Delphi și JavaScript. În Delphi, o valoare TDateTime este un număr în virgulă mobilă, numărul întreg reprezentând numărul de zile din 1899-12-31 și numărul fracționar reprezentând ora, unde 0,5 = amiază, 0,75 = 18:00 și așa mai departe. Nu există prevederi pentru fusurile orare sau vreo indicație dacă un anumit TDateTime reprezintă o oră locală sau o oră UTC. În JavaScript, datele sunt cel mai adesea codificate ca număr de milisecunde începând cu 1970-01-01 00:00:00 UTC. Acest lucru este similar cu Unix, unde este adesea definit ca numărul de secunde de la acel moment. Pentru a face această conversie, va trebui să știm care este decalajul UTC pentru orice dată JavaScript și apoi să facem puțină matematică pentru a le aduce într-un format TDateTime. Pentru a face acest lucru puțin mai ușor, obținem offset-ul UTC (tzo) din JavaScript, deoarece este puțin mai ușor de obținut. JavaScript este, de asemenea, locul în care sunt create datele, așa că nu trebuie să ne îngrijorăm dacă Delphi și JavaScript sunt de acord cu decalajul fusului orar. Putem folosi și funcția Delphi UnixToDateTime pentru a ajuta puțin la matematică. Iată cum arată funcția Delphi.

 procedura TForm1.FlatPickrChanged(selectedDates: matrice de Integer; dateStr: String; instanță: JSValue; tzo:Integer);
var
i: întreg;
ÎNCEPE
console.log('selectedDates: '+IntToStr(Length(selectedDates)));
i := 0;
în timp ce i < Length(selectedDates) do
ÎNCEPE
console.log(intToStr(i)+': '+FormatDateTime('aaaa-mm-zz hh:nn:ss', IncMinute(UnixToDateTime(Trunc(selectedDates[i]/1000)),-tzo)));
i := i + 1;
Sfârşit;
console.log('dateStr: '+DateStr);
Sfârşit;

Rezultatul este un set de intrări console.log() care includ matricea de date transmise funcției, precum și ultima dată selectată, furnizată ca valoare text. Momentan avem de-a face doar cu date individuale, dar suntem deja configurați aici pentru ca acestea să fie extinse la selecțiile intervalului de date și așa mai departe. Observați micul -tzo offset scăzut din valoarea calculată. Asigurați-vă că vă verificați munca!

O instanță aici, o instanță acolo, o instanță peste tot

Toate acestea funcționează destul de bine atunci când aveți o instanță a unei componente FlatPickr și nu aveți nevoie să o referiți direct. Dar ce se întâmplă dacă doriți să faceți modificări după ce a fost creat controlul FlatPickr? De exemplu, poate doriți să modificați datele care sunt activate, pe baza altor criterii de modificare. Pentru a face acest lucru, va trebui să accesați instanța FlatPickr existentă. Aceasta este una dintre variabilele transmise în funcția onChange() , dar este posibil să nu doriți să așteptați până când cineva schimbă data. Și dacă aveți mai multe comenzi FlatPickr pe pagina dvs., va fi important să interacționați cu acestea în mod independent.

O modalitate de a face acest lucru este definirea unei variabile de formular care va fi folosită ca variabilă de instanță FlatPickr. Îi putem atribui valoarea atunci când creăm instanța FlatPickr. În acest caz, Delphi nu are nicio idee despre ce fel de obiect JavaScript va fi acesta, așa că este folosit un tip de JSValue. Un fel de echivalent JavaScript al unei variante Delphi. Deoarece aceasta este o variabilă de formă, aceasta poate fi apoi referită în JavaScript în felul următor.

 var
Form1: TForm1;
flatpickr1: JSValue;
...
procedura TForm1.WebFormCreate(Expeditor: TObject);
ÎNCEPE
asm
this.flatpickr1 = flatpickr('#DatePicker1', {})
Sfârşit;
Sfârşit;

Variabila flatpickr1 poate fi folosită ulterior pentru a face referire la acea instanță când dorim să facem modificări. Rețineți că nu avem nevoie de var înainte de atribuire în acest caz, deoarece este deja alocat de Delphi. Iată un exemplu în care folosim o pereche de valori Delphi TDate pentru a seta intervalul de date pentru controlul FlatPickr. FlatPickr funcționează cu tot felul de formate de dată, dar transmiterea de date formatate ca șiruri aaaa-mm-zz poate fi cea mai puțin supărătoare.

procedura TForm1.WebButton1Click(Expeditor: TObject);

 var
DataStart: TDate;
DateEnd: TDate;
DateStartStr: șir;
DateEndStr: șir;
ÎNCEPE
DateStart := Astăzi;
DateEnd := Astăzi + 7;
DateStartStr := FormatDateTime('aaaa-ll-zz',DateStart);
DateEndStr := FormatDateTime('aaaa-ll-zz',DateEnd);
asm
this.flatpickr1.set('enable', [{ from: DateStartStr, to: DateEndStr}] );
Sfârşit;
Sfârşit;

În acest caz, folosim funcția set() a lui FlatPickr pentru a modifica opțiunea de activare , transmițându-i un singur interval de date. Este posibil să treceți mai mult de un interval de date sau o listă de date în același mod, așa că verificați documentația pentru orice cerințe specifice sunt. Cele mai multe dintre opțiunile disponibile în FlatPickr pot fi ajustate după ce controlul a fost creat folosind aceeași abordare, nu doar datele disponibile. De asemenea, este posibil să localizați instanța FlatPickr prin alte mijloace, dacă o variabilă de formular nu este disponibilă. Unele opțiuni includ utilizarea diferitelor selectoare, inclusiv jQuery, pentru a localiza instanța.

O altă perspectivă

Mai degrabă decât un meniu derulant, să avem calendarul mereu vizibil. Și în loc de o singură dată și oră, să lucrăm cu selectarea unui interval de date. Tot ce trebuie să facem este să specificăm un set diferit de opțiuni. Aici putem specifica și un

unde va fi poziționat calendarul FlatPickr, separat de TWebEdit care conține valorile. În acest caz, un TWebHTMLDiv a fost aruncat pe formular, cu numele și ElementID setate la „divHolder”. Controlul TWebEdit ar putea fi chiar ascuns dacă nu era nevoie de introducerea manuală a datei.

 asm
var flatpickr1 = flatpickr('#DatePicker1', {
inline: adevarat,
appendTo: divHolder,
WeekNumbers: adevărat,
mod: "gamă",
onChange: function(selectedDates, dateStr, instance) {
var d = data noua;
pas.Unit1.Form1.FlatPickrChanged(selectedDates, dateStr, instance, d.getTimezoneOffset())
}
});
Sfârşit;

Valoarea modului în acest caz permite selectarea unui interval de date. Când funcția onChange este apelată în acest mod , selectedDates este o matrice cu două date - data de început și data de sfârșit. Dacă modul a fost în schimb setat la „multiplu”, matricea selectDates ar conține o intrare pentru fiecare dintre datele care au fost selectate individual.

Vedere în linie cu selecția intervalului

Există o serie de alte opțiuni de explorat aici, inclusiv afișarea a mai mult de o lună la un moment dat, atât în varianta inline, cât și în varianta drop-down.

Alegeți o culoare, orice culoare

Ultimul element rămas din lista noastră originală de elemente obligatorii este capacitatea de a ajusta tema. Tema implicită este destul de funcțională, deși puțin mai mare. O serie de teme sunt disponibile de la FlatPickr care ajustează ușor culorile, dar nimic prea dramatic. Iată tema lor întunecată, de exemplu.

Tema întunecată a lui FlatPickr

Puteți accesa temele doar adăugând o altă linie la Project.html pentru a încărca fișierul CSS pentru tema care vă interesează.

Deoarece FlatPickr este o componentă 100% HTML/CSS, puteți schimba literalmente totul pentru a se potrivi cu propria dvs. temă. Am fost în primul rând interesat să-l fac mult mai mic, astfel încât să poată fi utilizabil ca meniu vertical în timp ce editam tabelele, de exemplu. De asemenea, eram interesat să am un set diferit de culori care s-ar schimba pe măsură ce tema generală se schimba, cum ar fi de la un mod de lumină la un mod de întuneric. Ambele sunt realizabile cu puțină răbdare în urmărirea selectoarelor CSS relevanți. Și , desigur, avem nevoie de niște colțuri rotunjite în unele cazuri. Poate fi nevoie de mai mult decât puțină lăutari, dar aproape sigur poate fi ajustată pentru a se potrivi gusturilor dumneavoastră particulare. Temele de la FlatPickr pot fi chiar descărcate și ajustate pentru a se potrivi, dar s-ar putea să nu fie mai puțin de lucru, în funcție de tipurile de modificări care vă interesează.

Câteva variații ale temei

Personalizarea FlatPickr nu începe și se termină doar cu teme. Există și un sistem de pluginuri. Există doar o mână de pluginuri, dar acestea pot fi utile în circumstanțe specifice. Există un selector de săptămâni și un selector de lună, pentru când sunt necesare intervale fixe. Există și unul pentru adăugarea de butoane la instanța FlatPickr, numită shortcut-buttons-flatpickr . Aceasta ar fi o opțiune solidă dacă doriți să adăugați un buton „azi” și un „ieri” sau orice combinație de butoane, care poate fi configurată pentru a facilita selectarea datelor și/sau a orelor.

Exemplu de proiect actualizat

Proiectul Sample a evoluat într-un clip destul de bun. Versiunea corespunzătoare acestui articol, Sample Project v5, este o actualizare destul de dramatică în comparație cu ultima versiune. Un mic eșantion de diferite configurații FlatPickr poate fi adăugat direct în WorkArea, astfel încât să îl puteți încerca imediat. Pe măsură ce trecem prin diferitele alte controale ale bibliotecii JS, voi încerca să le adaug și ele, mutând proiectul exemplu într-un sandbox adecvat pentru a experimenta toate lucrurile pe care le acoperim.

Iată un scurt rezumat al altor modificări.

• Configurarea sistemului de meniu pe mai multe niveluri pentru bara de navigare Bootstrap. În mare parte articole dezactivate, dar puteți vedea destul de ușor cum funcționează.
• Posibilitatea de a adăuga mai multe obiecte în WorkArea, împreună cu posibilitatea de a seta proprietățile pentru fiecare separat.
• Toate acele butoane Bootstrap sunt acum ascunse într-un element Bootstrap Offcanvas, configurat pentru a apărea atunci când este necesar.
• Informațiile Interact.js sunt acum afișate mai corect într-o secțiune din partea de jos. Cu mai multe controale, de asemenea.
• Încărcă mai multe modificări și îmbunătățiri și poate câteva surprize pentru cei curioși.
• O versiune live a proiectului este disponibilă la https://www.500foods.com/spv5 pe care o puteți încerca chiar acum.

Ca de obicei, sursa proiectului Sample este disponibilă și atașată acestui articol.

Mai mult FlatPickr?

Asta este tot ce vom acoperi astăzi. Data viitoare, vom arunca o privire la realizarea unei componente FlatPickr care poate fi adăugată la TMS WEB Core, astfel încât să o putem adăuga doar din paleta de componente IDE Delphi. Vom adăuga câteva proprietăți suplimentare pe care nu le-am acoperit încă pentru a menține interesul. Până atunci, mi-ar plăcea să aud ce părere aveți despre selecționatorii de date și oră în general, părerile voastre despre ISO8601 (de bază vs. extins?!) sau orice despre progresul proiectului Sample.

Andrew Simard.