Kaip tvarkyti datos ir laiko valdymą sistemoje „React“ naudojant Day.js

Datos ir laiko valdymas yra labai svarbus bet kuriai programai, o „React“ nėra išimtis. Nors „JavaScript“ suteikia integruotas datos ir laiko manipuliavimo funkcijas, jos gali būti sudėtingos. Laimei, daugelis trečiųjų šalių bibliotekų gali supaprastinti datos ir laiko valdymą React. Viena iš tokių bibliotekų yra Day.js.

Day.js yra lengva biblioteka, skirta analizuoti, patvirtinti, manipuliuoti ir formatuoti datas ir laiką JavaScript.

Diegimas Day.js

The Day.js biblioteka yra moderni alternatyva Moment.js, kuri yra kita biblioteka, naudojama datoms ir laikui tvarkyti. Day.js siūlo panašią API su mažesniu plotu ir greitesniu našumu.

Norėdami naudoti Day.js savo React programoje, pirmiausia turite ją įdiegti. Tai galite padaryti paleisdami šią komandą savo terminale:

npm įdiegti dayjs

Datos ir laiko analizavimas ir formatavimas

Day.js suteikia paprasta API datoms analizuoti ir formatuoti. Datą ir laiką galite gauti naudodami dayjs() metodą, bet pirmiausia turite jį importuoti iš Day.js bibliotekos.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti dayjs iš"dayjs";
funkcijaProgramėlė() {
konst data = dayjs();
konsolė.log (data); 
grąžinti (



Data ir laiko valdymas</p>
 </div>
 )
}
eksportuotinumatytas Programėlė

The dayjs() metodas sukuria naują Day.js objektą, vaizduojantį konkrečią datą ir laiką. Aukščiau pateiktame pavyzdyje dayjs() metodas sukuria Day.js objektą, vaizduojantį dabartinę datą ir laiką.

Jūsų konsolėje Day.js objektas atrodytų taip:

The dayjs() metodas priima pasirenkamą datos argumentą, kuris gali būti eilutė, skaičius (Unix laiko žyma), „JavaScript“ datos objektas, arba kitą Day.js objektą. Metodas sugeneruos Day.js objektą, atspindintį nurodytą datos argumentą.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti dayjs iš"dayjs";
funkcijaProgramėlė() {
konst data = dayjs('2023-05-01');
konsolė.log (data); // Day.js objektas, vaizduojantis nurodytą datą
konst unixDate = dayjs(1651382400000);
konsolė.log (unixDate); // Day.js objektas, vaizduojantis nurodytą datą
grąžinti (



Data ir laiko valdymas</p>
 </div>
 )
}
eksportuotinumatytas Programėlė

Šio kodo bloko Day.js objekto išvestis bus panaši į ankstesnį kodo bloką, bet turės skirtingas ypatybių reikšmes.

Norėdami rodyti datas, sugeneruotas kaip Day.js objektus, turite naudoti formatas () metodas. The formatas () Day.js bibliotekos metodas leidžia suformatuoti Day.js objektą kaip eilutę pagal tam tikrą formato eilutę.

Metodas naudoja formato eilutę kaip argumentą. Eilutės argumentas gali apimti raidžių ir specialiųjų simbolių derinį, kurių kiekvienas turi tam tikrą reikšmę,

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti dayjs iš"dayjs";
funkcijaProgramėlė() {
konst data = dayjs('2023-05-01'.format(„ddd, MMMM D, YYYY“); // Pirmadienis, 2023 m. gegužės 1 d
konst laikas = dayjs().format(„HH: mm: ss“); //09:50:23
konst unixDate = dayjs(1651382400000.format(„MM/DD/MM“); // 05/01/22
grąžinti (



{data}</p>

{unixDate}</p>

{laikas}</p>
 </div>
 )
}
eksportuotinumatytas Programėlė

The data kintamasis rodys datą tokiu formatu „trečiadienis, 2023 m. balandžio 26 d.“. Formato eilutė yra „ddd, MMMM D, YYYY“ kur dddd yra savaitės diena, MMMM yra mėnuo žodžiais, D yra mėnesio diena iš vieno arba dviejų skaitmenų ir YYYY yra metai iš keturių skaitmenų.

The unixDate kintamasis suformatuotas kaip eilutė naudojant formato eilutę „MM/DD/MMMM“, kuris žymi mėnesį dviem skaitmenimis, mėnesio dieną – dviem skaitmenimis ir metus – keturiais skaitmenimis.

The laikas kintamasis rodo esamą laiką nurodytu formatu. Formato eilutė yra „HH: mm: ss“ kur HH reiškia valandas, mm reiškia protokolą ir ss reiškia sekundes.

Manipuliavimas datomis ir laiku

Day.js pateikia kelis metodus, kurie leidžia lengvai valdyti datas ir laiką. Galite kreiptis į Day.js oficialius dokumentus, kad gautumėte visą galimų manipuliavimo datomis ir laiku metodų sąrašą.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti dayjs iš"dayjs";
funkcijaProgramėlė() {
konst data = dayjs().add(7,'dienos'.format(„ddd, MMMM D, YYYY“); // Trečiadienis, 2023 m. birželio 16 d 
konst laikas = dayjs().subtract(2, 'valandos'.format(„HH: mm: ss“); // 07:53:00
grąžinti (



{data}</p>

{laikas}</p>
 </div>
 )
}
eksportuotinumatytas Programėlė

Aukščiau pateiktame kodo bloke naudojama papildyti() būdas pridėti 7 dienas prie dabartinės datos. The papildyti() metodas leidžia pridėti nurodytą laiką prie Day.js objekto. Metodas apima du argumentus: laiko, kurį reikia pridėti, skaičių ir laiko vienetą.

Su atimti () metodą, galite atimti nurodytą laiką iš Day.js objektas. The laikas kintamasis atima 2 valandas iš dabartinio laiko, naudodamas atimti () metodas.

Rodomas santykinis laikas

Day.js siūlo kelis metodus, įskaitant nuo dabar(), dabar(), į (), ir iš () kad būtų rodomas santykinis laikas, pvz., „prieš 2 valandas“ arba „po 3 dienų“. Norėdami naudoti šiuos metodus, importuokite santykinis laikas papildinys iš dayjs/plugin/relativeTime savo React paraiškoje.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti dayjs iš"dayjs";
importuoti santykinis laikas iš'dayjs/plugin/relativeTime';
funkcijaProgramėlė() {
 dayjs.extend (relativeTime);

konst data = dayjs().add(7, 'dienos')
konst santykinisDate = data.fromNow(); // per 7 dienas
konst data2 = dayjs().subtract(2, 'valandos');
konst santykinisData2 = data2.toDabar(); // per 2 valandas
konst lastYear = dayjs().subtract(1, 'metai');
konst diff = data.from (lastYear); // per metus
konst skirtumas2 = data.iki (paskutiniai metai) // prieš metus
grąžinti (



{ santykinė data }</p>

{ santykinė data2 }</p>

{ skirtumas }</p>

{ diff2 }</p>
 </div>
 )
}
eksportuotinumatytas Programėlė

The nuo dabar() funkcija rodo santykinę laiko eilutę, atspindinčią skirtumą tarp esamo laiko ir nurodytos datos. Šiame pavyzdyje nuo dabar() rodo skirtumą tarp data ir dabartinis laikas.

The dabar() funkcija yra panaši į nuo dabar() funkcija, nes rodoma eilutė, nurodanti skirtumą tarp nurodytos datos ir dabartinio laiko. Kai skambinate dabar() funkcija, ji grąžina santykinę laiko eilutę į dabartinį laiką.

Galiausiai, naudojant iš () ir į () funkcijas, galite rodyti santykinę laiko eilutę, nurodančią skirtumą tarp dviejų nurodytų datų. Šiame pavyzdyje matote skirtumą tarp praeitais metais ir data naudojant iš () ir į () funkcijas.

Atminkite, kad taip pat galite perduoti pasirenkamą loginį argumentą nuo dabar(), dabar(), iš (), ir į () metodus, nurodančius, ar įtraukti ar neįtraukti priesagą (pvz., „prieš“ arba „į“).

Pavyzdžiui:

konst data = dayjs().add(7, 'dienos')
konst Reliatyvi data = data.fromNow(tiesa); // 7 dienos
konst data2 = dayjs().subtract(2, 'valandos');
konst ReliatyvusDate2 = date2.toNow(tiesa); // 2 valandos
konst lastYear = dayjs().subtract(1, 'metai');
konst diff = data.from (lastYear, tiesa) // metai
konst diff2 = data.to (praėję metai, tiesa) // metai

Pravažiavimas klaidinga prie argumento bus rodomos datos su priesaga.

Efektyvus datos ir laiko valdymas

Datos ir laiko tvarkymas yra esminis bet kurios programos aspektas, o Day.js suteikia lengvai naudojamą ir lanksčią biblioteką, skirtą šioms operacijoms atlikti React programoje. Įtraukę Day.js į savo projektą, galite lengvai formatuoti datas ir laiką, analizuoti eilutes ir manipuliuoti trukme.

Be to, Day.js siūlo daugybę papildinių, kurie praplečia savo funkcijas ir daro jį dar galingesnį. Nesvarbu, ar kuriate paprastą kalendorių, ar sudėtingą planavimo sistemą, Day.js yra puikus pasirinkimas norint tvarkyti datą ir laiką „React“ programoje.