Moment.js yra puiki biblioteka, skirta efektyviai valdyti datą ir laiką „React“ programose.

Datų ir laiko tvarkymas „React“ gali būti iššūkis tiems, kurie nėra susipažinę su šia sritimi. Laimei, yra keletas bibliotekų, kurios gali padėti valdyti datą ir laiką „React“. Viena iš šių bibliotekų yra Moment.js.

Moment.js yra lengva biblioteka su paprastu būdu manipuliuoti ir formatuoti datas ir laikus naudojant JavaScript.

Moment.js bibliotekos įdiegimas

Moment.js biblioteka yra a paketas, skirtas valdyti datos ir laiko operacijas JavaScript. Moment.js bibliotekos įdiegimas yra pirmasis žingsnis naudojant Moment.js React programoje. Tai galite padaryti paleisdami šią komandą savo terminale:

npm diegimo momentas

Kai diegimas bus baigtas, savo React komponente galėsite naudoti Moment.js.

Moment.js naudojimas datai ir laikui rodyti

Naudodami Moment.js galite rodyti datas ir laikus konkrečiu formatu „React“ programoje. Norėdami naudoti biblioteką, importuokite momentas iš įdiegto paketo.

importuoti Reaguoti 





instagram viewer


iš'reaguoti';
importuoti momentas iš'momentas';
funkcijaProgramėlė() {


konst data = momentas().format("MMMM DD MMMM");
konst laikas = momentas().format("HH mm ss");


grąžinti (




 Šiandiendata yra { data } 


 Laikas yra { laikas } </p>
 </div>
 )
}


eksportuotinumatytas Programėlė

The momentas() metodas sukuria naują momentinį objektą, vaizduojantį konkretų laiko tašką. The formatas () metodas formatuoja momentinį objektą į eilutės atvaizdavimą.

The formatas () metodas paima eilutės argumentą, nurodantį norimą momento objekto formatą. Eilutės argumentas gali apimti raidžių ir specialiųjų simbolių derinį, kurių kiekvienas turi tam tikrą reikšmę.

Kai kurie iš šių specialiųjų simbolių yra:

  • YYYY: Metai su keturiais skaitmenimis
  • YY: Metai su dviem skaitmenimis
  • MM: mėnuo su dviem skaitmenimis
  • M: mėnuo su vienu arba dviem skaitmenimis
  • MMMM: Mėnuo žodžiais
  • DD: mėnesio diena su dviem skaitmenimis
  • D: mėnesio diena su vienu arba dviem skaitmenimis
  • Daryk: mėnesio diena su eiliniu
  • HH: valanda su dviem skaitmenimis
  • H: valanda su vienu arba dviem skaitmenimis
  • mm: Minutė su dviem skaitmenimis
  • m: minutė su vienu arba dviem skaitmenimis
  • ss: antra su dviem skaitmenimis
  • s: antrasis su vienu arba dviem skaitmenimis

Kai Programėlė atvaizduojamas ankstesnio kodo bloko komponentas, dabartinė data ir laikas ekrane rodomi nurodytu formatu.

The momentas() metodas gali naudoti eilutės datos arba laiko argumentą. Kai momentas() metodas turi eilutės datos arba laiko argumentą, jis sukuria momento objektą, vaizduojantį tą datą arba laiką. Eilutė gali būti įvairių formatų, pvz., ISO 8601, RFC 2822 arba Unix laiko žyma.

Pavyzdžiui:

konst data = momentas ('1998-06-23'.format("MMMM DD MMMM");

Moment.js naudojimas norint manipuliuoti data ir laiku

Moment.js bibliotekoje taip pat yra keletas būdų, kaip valdyti datas ir laiką. Šie metodai leidžia pridėti arba atimti laiko intervalus, nustatyti konkrečias datos ir laiko komponentų reikšmes ir atlikti kitas taikomas operacijas.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti momentas iš'momentas';
funkcijaProgramėlė() {


konst rytoj = momentas().add(1, 'diena'.format(„Do MMMM, YYYY“);
konst laikas = momentas().atimti(1, 'valanda'.format("HH: mm: ss");
konst paskutiniai metai = momentas().set('metai', 2022).set('mėnuo', 1.format(„Do MMMM, YYYY“);
konst valanda = momentas().get('valanda');


grąžinti (


"Programėlė">
Rytojdata yra { rytoj }


Tai buvo laikas: { laikas }, prieš valandą</p>


{ praeitais metais }</p>


{ valanda }</p>
 </div>
 )
}


eksportuotinumatytas Programėlė

Šiame pavyzdyje jūs deklaruoti šiuos JavaScript kintamuosius: rytoj, laikas, praeitais metais, ir valandą. Šie keturi kintamieji naudoja įvairius Moment.js bibliotekos metodus datai ir laikui valdyti.

The rytoj kintamasis naudoja papildyti() būdas pridėti vieną dieną prie dabartinės datos. The papildyti() metodas prideda laiko prie nurodyto momento objekto. Funkcijai naudojami du argumentai: trukmės reikšmė ir eilutė, nurodanti laiko vienetą, kurį reikia pridėti. Vienetas gali būti metų, mėnesių, savaites, dienų, valandų, minučių, ir sekundžių.

Taip pat galite atimti laiką naudodami atimti () metodas. Šiuo atveju, laikas kintamasis naudoja atimti () būdas atimti vieną valandą iš esamo laiko.

Naudojant rinkinys () metodas, praeitais metais kintamasis nustato metus iki 2022 m., o mėnesį – į vasarį (nes sausis vaizduojamas kaip 0 mėnuo). The rinkinys () metodas Moment objektui priskiria tam tikrą laiko vienetą.

Su gauti () metodu, galite gauti konkretų laiką. The gauti () metodas apima vieną argumentą, laiko vienetą.

Moment.js naudojimas datos ir laiko analizei

Kita naudinga Moment.js savybė yra galimybė analizuoti datas ir laikus iš eilučių. Tai gali būti naudinga dirbant su duomenimis iš išorinių šaltinių.

Norėdami iš eilutės išanalizuoti datą ar laiką, turite naudoti momentas() metodas. Šiuo atveju, momentas() metodas naudoja du argumentus: datos eilutę ir formato eilutę.

Štai pavyzdys, kaip galite naudoti momentas() datų ir laiko analizės metodas:

importuoti Reaguoti iš'reaguoti';
importuoti momentas iš'momentas';
funkcijaProgramėlė() {


konst data = momentas ('2920130000', „Do-MMMM-YYYY“).toDate();
konsolė.log( data );


grąžinti (


</div>
 )
}
eksportuotinumatytas Programėlė

Aukščiau esančiame kodo bloke momentas() metodas išanalizuoja šią eilutę „2920130000“, naudodamas „Do-MMMM-YYYY“ formato eilutę. The iki datos () metodas konvertuoja momentinį objektą į vietinis JavaScript datos objektas.

The iki datos () metodas nenaudoja argumentų ir grąžina JavaScript Date objektą, vaizduojantį tą pačią datą ir laiką kaip ir momento objektas.

Rodomas santykinis laikas

Naudodami Moment.js biblioteką galite formatuoti ir rodyti santykinį laiką. Norėdami tai padaryti, naudokite nuo dabar() ir dabar() metodus. Šie metodai rodo laiką nuo nurodytos datos iki dabartinio laiko.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti momentas iš'momentas';
funkcijaProgramėlė() {


konst vakar = momentas().atimti(7, 'diena');
konst laikas1 = vakar.nuo dabar(); // Prieš 7 dienas
konst laikas2 = vakar.to dabar(); // per 7 dienas


grąžinti (




{ laikas1 }</p>


{ laikas2 }</p>
 </div>
 )
}


eksportuotinumatytas Programėlė

Šiame pavyzdyje nuo dabar() metodas grąžina santykinį laiką, praėjusį nuo nurodytos datos, o dabar() metodas grąžina santykinį laiką iki dabartinio laiko.

Daugiau į Moment.js

Moment.js yra galinga biblioteka, kuri suteikia paprastą būdą manipuliuoti ir formatuoti datas ir laiką JavaScript. Išmokote manipuliuoti, rodyti ir analizuoti datas ir laikus programoje „React“, naudodami Moment.js.

Moment.js siūlo keletą kitų metodų, tokių kaip vietinis, startOf, endOf ir pan. Tačiau turėdami pateiktą informaciją esate daugiau nei pasirengę pradėti naudoti Moment.js savo React programoje.