Moment.js, React uygulamalarında tarih ve saat yönetimini verimli bir şekilde işlemek için harika bir kitaplıktır.

React'te tarih ve saati yönetmek, bu alana aşina olmayanlar için zorlayıcı olabilir. Neyse ki, React'te tarih ve saat yönetimi konusunda size yardımcı olabilecek birkaç kitaplık var. Bu kütüphanelerden biri de Moment.js'dir.

Moment.js, JavaScript'te tarih ve saatleri değiştirmenin ve biçimlendirmenin basit bir yolunu sunan hafif bir kitaplıktır.

Moment.js Kitaplığını Yükleme

Moment.js kütüphane bir JavaScript'te tarih ve saat işlemlerini yönetmek için paket. Moment.js kitaplığını yüklemek, Moment.js'yi React uygulamanızda kullanmanın ilk adımıdır. Bunu terminalinizde aşağıdaki komutu çalıştırarak yapabilirsiniz:

npm kurulum anı

Kurulum tamamlandıktan sonra Moment.js'yi React bileşeninizde kullanabilirsiniz.

Tarih ve Saati Görüntülemek için Moment.js'yi Kullanma

Tarihleri ​​ve saatleri React uygulamanızda belirli bir biçimde görüntülemek için Moment.js'yi kullanabilirsiniz. Kitaplığı kullanmak için içe aktarın an yüklü paketten.

instagram viewer 
içe aktarmak Tepki itibaren'tepki';
içe aktarmak an itibaren'an';
işlevUygulama() {


sabit tarih = an().format("AAA GG YYYY");
sabit zaman = an().format("HH mm ss");


geri dönmek (




 Bugüntarihi { tarih } 


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


ihracatvarsayılan Uygulama

bu an() method, zamanda belirli bir noktayı temsil eden yeni bir moment nesnesi yaratır. bu biçim() yöntem, bir moment nesnesini bir dize temsiline biçimlendirir.

bu biçim() yöntem, moment nesnesi için istenen biçimi belirten bir dize bağımsız değişkeni alır. Dize argümanı, her biri belirli bir anlama sahip olan harflerin ve özel karakterlerin bir kombinasyonunu içerebilir.

Bu özel karakterlerden bazıları şunlardır:

  • YYYY: Dört haneli yıl
  • YY: İki haneli yıl
  • AA: İki haneli ay
  • M: Bir veya iki haneli ay
  • AAAA: Kelimelerle ay
  • DD: İki basamaklı ayın günü
  • D: Bir veya iki haneli ayın günü
  • Yapmak: Sıralı ayın günü
  • HH: İki haneli saat
  • H: Bir veya iki haneli saat
  • mm: İki haneli dakika
  • M: Bir veya iki haneli dakika
  • ss: İki basamaklı ikinci
  • S: Bir veya iki haneli saniye

Ne zaman Uygulama önceki kod bloğundaki bileşen işlendiğinde, geçerli tarih ve saat ekranda belirtilen biçimde görüntülenir.

bu an() yöntem bir dizi tarih veya saat bağımsız değişkeni alabilir. Ne zaman an() yöntemin bir dizi tarih veya saat bağımsız değişkeni varsa, o tarih veya saati temsil eden bir moment nesnesi oluşturur. Dize, ISO 8601, RFC 2822 veya Unix zaman damgası gibi çeşitli biçimlerde olabilir.

Örneğin:

sabit tarih = an('1998-06-23').biçim("AAA GG YYYY");

Tarih ve Saati Değiştirmek için Moment.js'yi Kullanma

Moment.js kitaplığı, tarih ve saatleri değiştirmek için çeşitli yöntemler de sağlar. Bu yöntemler, zaman aralıkları eklemenize veya çıkarmanıza, tarih ve saat bileşenleri için belirli değerler ayarlamanıza ve diğer geçerli işlemleri gerçekleştirmenize olanak tanır.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak an itibaren'an';
işlevUygulama() {


sabit yarın = an().add(1, 'gün').biçim("AAA, YYYY yapın");
sabit zaman = an().çıkarma(1, 'saat').biçim("SS: dd: ss");
sabit geçenYıl = an().set('yıl', 2022).ayarlamak('ay', 1).biçim("AAA, YYYY yapın");
sabit saat = an().get('saat');


geri dönmek (


"Uygulama">
Yarıntarihi { yarın }


Bu saat şuydu: { time }, bir saat önce</p>


{ geçen yıl }</p>


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


ihracatvarsayılan Uygulama

Bu örnekte, siz aşağıdaki JavaScript değişkenlerini bildirin: Yarın, zaman, geçen sene, Ve saat. Bu dört değişken, tarih ve saati değiştirmek için Moment.js kitaplığının çeşitli yöntemlerini kullanır.

bu Yarın değişken kullanır eklemek() Geçerli tarihe bir gün ekleme yöntemi. bu eklemek() yöntemi, belirli bir Moment nesnesine zaman ekler. İşlev iki bağımsız değişken alır: bir süre değeri ve eklenecek zaman birimini temsil eden bir dize. birim olabilir yıl, aylar, haftalar, günler, saat, dakika, Ve saniye.

kullanarak zamanı da çıkarabilirsiniz. çıkarma() yöntem. bu durumda, zaman değişken kullanır çıkarma() Geçerli zamandan bir saat çıkarma yöntemi.

Kullanmak ayarlamak() yöntem, geçen sene değişkeni yılı 2022'ye ve ayı Şubat'a ayarlar (Ocak 0 ayı olarak temsil edildiğinden). bu ayarlamak() yöntemi, bir Moment nesnesine belirli bir zaman birimi atar.

İle elde etmek() yöntemi, belirli bir zaman alabilirsiniz. bu elde etmek() yöntem tek bir bağımsız değişken, bir zaman birimi alır.

Tarih ve Saati Ayrıştırmak için Moment.js'yi Kullanma

Moment.js'nin bir başka yararlı özelliği de dizelerden tarih ve saatleri ayrıştırabilmesidir. Bu, dış kaynaklardan gelen verilerle çalışırken faydalı olabilir.

Bir diziden tarih veya saat ayrıştırmak için, kullanmanız gerekir. an() yöntem. bu durumda, an() yöntem iki bağımsız değişken alır, tarih dizesi ve biçim dizesi.

İşte nasıl kullanabileceğinize dair bir örnek an() tarih ve saatleri ayrıştırma yöntemi:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak an itibaren'an';
işlevUygulama() {


sabit tarih = an('2920130000', "AAA-YYYY yapın").bugüne kadar();
konsol.log(tarih);


geri dönmek (


</div>
 )
}
ihracatvarsayılan Uygulama

Yukarıdaki kod bloğunda, an() yöntemi, "2920130000" dizisini "Do-MMMM-YYYY" biçim dizesini kullanarak ayrıştırır. bu bugüne kadar() yöntem, moment nesnesini şuna dönüştürür: yerel bir JavaScript Date nesnesi.

bu bugüne kadar() yöntem hiçbir bağımsız değişken almaz ve moment nesnesiyle aynı tarih ve saati temsil eden bir JavaScript Date nesnesi döndürür.

Göreli Zamanı Görüntüleme

Moment.js kütüphanesi ile göreceli zamanı formatlayabilir ve görüntüleyebilirsiniz. Bunu yapmak için, şu andan itibaren() Ve şimdiye() yöntemler. Bu yöntemler, belirli bir tarih ile geçerli saat arasındaki zamanı görüntüler.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak an itibaren'an';
işlevUygulama() {


sabit dün = an().çıkarma(7, 'gün');
sabit zaman1 = dün.fromNow(); // 7 gün önce
sabit zaman2 = dün.toNow(); // 7 gün içinde


geri dönmek (




{ time1 }</p>


{ süre2 }</p>
 </div>
 )
}


ihracatvarsayılan Uygulama

Bu örnekte, şu andan itibaren() yöntemi, belirtilen tarihten itibaren geçen göreli süreyi döndürürken, şimdiye() yöntem, geçerli zamana kadar olan göreli süreyi döndürür.

Moment.js'den daha fazlası

Moment.js, JavaScript'te tarih ve saatleri işlemek ve biçimlendirmek için basit bir yol sağlayan güçlü bir kitaplıktır. Moment.js kullanarak React'te tarihleri ​​ve saatleri nasıl değiştireceğinizi, görüntüleyeceğinizi ve ayrıştıracağınızı öğrendiniz.

Moment.js, yerel, startOf, endOf vb. gibi birkaç başka yöntem sunar. Ancak verilen bilgilerle, Moment.js'yi React uygulamanızda kullanmaya başlamak için fazlasıyla hazırsınız.