Day.js kitaplığı, React uygulamalarında tarih ve saat işlemlerini sorunsuz bir şekilde işlemeyi sağlar.

Tarih ve saat yönetimi, herhangi bir uygulama için çok önemlidir ve React bir istisna değildir. JavaScript, yerleşik tarih ve saat işleme işlevleri sağlarken, kullanışsız olabilir. Neyse ki, birçok üçüncü taraf kitaplığı, React'te tarih ve saat yönetimini basitleştirebilir. Böyle bir kitaplık Day.js'dir.

Day.js, JavaScript'te tarih ve saatleri ayrıştırmak, doğrulamak, işlemek ve biçimlendirmek için hafif bir kitaplıktır.

Day.js'yi yükleme

bu gün.js kütüphane modern bir alternatiftir. Tarih ve saatleri işlemek için kullanılan başka bir kitaplık olan Moment.js. Day.js, daha küçük ayak izine ve daha hızlı performansa sahip benzer bir API sunar.

Day.js'yi React uygulamanızda kullanmak için önce onu yüklemeniz gerekir. Bunu terminalinizde aşağıdaki komutu çalıştırarak yapabilirsiniz:

npm yükleme dayjs

Tarihleri ​​ve Saatleri Ayrıştırma ve Biçimlendirme

Day.js sağlar basit bir API tarihleri ​​ayrıştırmak ve biçimlendirmek için. kullanarak tarih ve saati alabilirsiniz.

instagram viewer
dayjs() yöntemi, ancak önce onu Day.js kitaplığından içe aktarmanız gerekir.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak günler itibaren'günler';
işlevUygulama() {


sabit tarih = günjs();
konsol.log (tarih); 


geri dönmek (




Tarih ve Zaman Yönetimi</p>
 </div>
 )
}


ihracatvarsayılan Uygulama

bu dayjs() yöntemi, belirli bir tarih ve saati temsil eden yeni bir Day.js nesnesi oluşturur. Yukarıdaki örnekte, dayjs() yöntemi, geçerli tarih ve saati temsil eden bir Day.js nesnesi oluşturur.

Konsolunuzda Day.js nesnesi şöyle görünür:

bu dayjs() yöntem, bir dize, bir sayı (Unix zaman damgası) olabilen isteğe bağlı bir tarih bağımsız değişkenini kabul eder, JavaScript Tarih nesnesiveya başka bir Day.js nesnesi. Yöntem, belirtilen tarih bağımsız değişkenini temsil eden bir Day.js nesnesi oluşturur.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak günler itibaren'günler';
işlevUygulama() {


sabit tarih = günjs('2023-05-01');
konsol.log (tarih); // Belirtilen tarihi temsil eden Day.js nesnesi


sabit unixDate = günjs(1651382400000);
konsol.log (unixDate); // Belirtilen tarihi temsil eden Day.js nesnesi


geri dönmek (




Tarih ve Zaman Yönetimi</p>
 </div>
 )
}


ihracatvarsayılan Uygulama

Day.js nesnesinin bu kod bloğunun çıktısı, önceki kod bloğuna benzer olacaktır ancak farklı özellik değerlerine sahip olacaktır.

Day.js nesneleri olarak oluşturulan tarihleri ​​görüntülemek için, biçim() yöntem. bu biçim() Day.js kitaplığının yöntemi, bir Day.js nesnesini belirli bir biçim dizesine göre bir dize olarak biçimlendirmenizi sağlar.

Yöntem, bağımsız değişkeni olarak bir biçim dizesi alır. Dize bağımsız değişkeni, her biri belirli bir anlama sahip olan harflerin ve özel karakterlerin bir kombinasyonunu içerebilir.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak günler itibaren'günler';
işlevUygulama() {


sabit tarih = günjs('2023-05-01').biçim('dddd, AAAA G, YYYY'); // 1 Mayıs 2023 Pazartesi
sabit zaman = dayjs().format('SS: dd: ss'); //09:50:23
sabit unixDate = günjs(1651382400000).biçim("AA/GG/YY"); // 05/01/22


geri dönmek (




{tarih}/p>


{unixDate}</p>


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


ihracatvarsayılan Uygulama

bu tarih değişkeni tarihi '26 Nisan 2023 Çarşamba' biçiminde gösterecek. Biçim dizesi "dddd, AAAA G, YYYY" Neresi dddd haftanın günüdür, AAAA kelimelerle aydır, D bir veya iki basamaklı ayın günüdür ve YYYY dört basamaklı yıldır.

bu unixDate değişken, biçim dizesi kullanılarak bir dize olarak biçimlendirilir 'AA/GG/YYYY,' iki haneli olarak ayı, iki haneli olarak ayın gününü ve dört haneli yılı temsil eder.

bu zaman değişkeni, geçerli saati belirtilen biçimde görüntüler. Biçim dizesi "SS: dd: ss" nerede HH saatleri temsil eder, mm dakikaları temsil eder ve ss saniyeleri temsil eder.

Tarihleri ​​ve Saatleri Değiştirme

Day.js, tarih ve saatleri değiştirmeyi kolaylaştıran birden çok yöntem sağlar. başvurabilirsiniz gün.js Tarihleri ​​ve saatleri değiştirmek için mevcut yöntemlerin tam listesini almak için resmi belgeler.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak günler itibaren'günler';
işlevUygulama() {


sabit tarih = dayjs().add(7,"günler").biçim('dddd, AAAA G, YYYY'); // 16 Haziran 2023 Çarşamba 
sabit zaman = dayjs().çıkarma(2, 'saat').biçim('SS: dd: ss'); // 07:53:00


geri dönmek (




{tarih}/p>


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


ihracatvarsayılan Uygulama

Yukarıdaki kod bloğu, eklemek() Geçerli tarihe 7 gün ekleme yöntemi. bu eklemek() yöntemi, bir Day.js nesnesine belirli bir süre eklemenizi sağlar. Yöntem iki bağımsız değişken alır, sayı olarak eklenecek süre ve eklenecek zaman birimi.

İle çıkarma() yönteminden belirli bir süreyi çıkarabilirsiniz. gün.js nesne. bu zaman değişkeni kullanarak geçerli saatten 2 saat çıkarır çıkarma() yöntem.

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

Day.js, aşağıdakiler de dahil olmak üzere çeşitli yöntemler sunar: şu andan itibaren(), şimdiye(), ile(), Ve itibaren() "2 saat önce" veya "3 gün sonra" gibi göreli zamanı görüntülemek için. Bu yöntemleri kullanmak için, göreceliZaman gelen eklenti dayjs/eklenti/relativeTime React uygulamanızda.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak günler itibaren'günler';
içe aktarmak göreceliZaman itibaren'dayjs/eklenti/relativeTime';
işlevUygulama() {


 dayjs.extend (relativeTime);

sabit tarih = dayjs().add(7, "günler")
sabit akrabaTarihi = tarih.fromNow(); // 7 gün içinde


sabit tarih2 = günjs().çıkarma(2, 'saat');
sabit akrabaTarih2 = tarih2.toNow(); // 2 saat içinde


sabit geçenYıl = dayjs().çıkarma(1, 'yıl');
sabit fark = tarih.başlangıç ​​(sonYıl); // bir yıl içinde
sabit diff2 = tarih.to (sonYıl) // bir yıl önce


geri dönmek (




{ göreliTarih }</p>


{ akrabaTarihi2 }</p>


{ fark }</p>


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


ihracatvarsayılan Uygulama

bu şu andan itibaren() işlev, geçerli saat ile belirtilen tarih arasındaki farkı temsil eden göreli bir zaman dizesi görüntüler. Bu örnekte, şu andan itibaren() arasındaki farkı gösterir tarih ve şimdiki zaman.

bu şimdiye() işlevi şuna benzer: şu andan itibaren() işlevi, belirtilen tarih ile geçerli saat arasındaki farkı temsil eden bir dize görüntülemesidir. aradığınızda şimdiye() işlev, geçerli zamana göreli bir zaman dizesi döndürür.

Son olarak, kullanarak itibaren() Ve ile() işlevler, belirtilen iki tarih arasındaki farkı temsil eden göreli bir zaman dizesi görüntüleyebilirsiniz. Bu örnekte, arasındaki farkı alırsınız geçen sene Ve tarih kullanmak itibaren() Ve ile() fonksiyonlar.

Not, isteğe bağlı bir boole bağımsız değişkenini de iletebilirsiniz. şu andan itibaren(), şimdiye(), itibaren(), Ve ile() son ekin dahil edilip edilmeyeceğini belirleme yöntemleri (örneğin, "önce" veya "içinde").

Örneğin:

sabit tarih = dayjs().add(7, "günler")
sabit akrabaTarihi = tarih.şimdiden(doğru); // 7 gün
sabit tarih2 = günjs().çıkarma(2, 'saat');
sabit akrabaTarihi2 = tarih2.toNow(doğru); // 2 saat
sabit geçenYıl = dayjs().çıkarma(1, 'yıl');
sabit fark = tarih.başlangıç ​​(sonYıl, doğru) // bir yıl
sabit diff2 = tarih.to (sonYıl, doğru) // bir yıl

Geçen YANLIŞ argümana, soneki olan tarihleri ​​​​gösterecektir.

Tarih ve Saati Etkili Yönetme

Tarih ve saati yönetmek, herhangi bir uygulamanın çok önemli bir yönüdür ve Day.js, bir React uygulamasında bu işlemleri gerçekleştirmek için kullanımı kolay ve esnek bir kitaplık sağlar. Day.js'yi projenize dahil ederek tarihleri ​​ve saatleri kolayca biçimlendirebilir, dizeleri ayrıştırabilir ve süreleri değiştirebilirsiniz.

Ayrıca Day.js, işlevselliğini genişletmek ve daha da güçlü hale getirmek için bir dizi eklenti sunar. İster basit bir takvim, ister karmaşık bir planlama sistemi oluşturuyor olun, Day.js, React uygulamanızda tarih ve saati yönetmek için mükemmel bir seçimdir.