Mengendalikan tarikh dan masa operasi dalam aplikasi anda dengan mudah menggunakan Day.js

pengenalan

Bekerja dengan tarikh dan masa dalam JavaScript boleh menjadi mencabar, terutamanya apabila format tertentu diperlukan. Kerumitan ini sering membawa kepada ketidakkonsistenan dalam tarikh dan masa dalam aplikasi. Akibatnya, pembangun beralih kepada alatan dan perpustakaan luaran seperti Day.js untuk mengurus operasi ini dengan mudah dan lebih tepat.

Dalam artikel ini, kami akan meneroka apa itu Day.js, ciri asasnya, cara menggunakannya dalam projek anda, cara melanjutkan fungsinya dengan pemalam dan sokongan penyemak imbasnya.

Apakah itu Day.js?

Day.js ialah pustaka javascript ringan yang mudah digunakan, direka untuk mengendalikan pelbagai operasi tarikh dan masa, membolehkan mereka dipersembahkan dalam format yang mudah dibaca dalam aplikasi web.

Pustaka boleh digunakan pada kedua-dua persekitaran sisi klien(pelayar) dan sisi pelayan(Node.Js).

Dalam pembangunan web moden, pembangun berusaha untuk mengutamakan kelajuan dan prestasi semasa membina aplikasi. Import besar dan fail perpustakaan yang besar ialah dua faktor penghalang biasa bagi atribut ini.

Nasib baik, Day.js menangani kebimbangan ini dengan saiz fail padat hanya 2KB, menjadikannya pilihan ideal untuk mengurus operasi tarikh dan masa tanpa menjejaskan prestasi aplikasi.

Pemasangan

Untuk mula bekerja dengan pustaka Day.js dalam aplikasi anda, anda perlu memasukkannya terlebih dahulu.

Untuk menggunakan pustaka pada bahagian klien, masukkan skrip berikut dalam tag dokumen HTML anda.

<script src="path/to/dayjs/dayjs.min.js"></script>

Sebagai alternatif, anda boleh mengakses perpustakaan melalui CDN seperti jsdeliver CDN.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Untuk memasang pustaka sebagai kebergantungan dalam aplikasi anda, jalankan arahan berikut:

npm install dayjs

Seterusnya, import dayjs ke dalam fail javascript anda:

import dayjs from 'dayjs';

Untuk mencipta contoh Day.js baharu, panggil fungsi dayjs(). Jika tiada hujah diluluskan, ia mengembalikan objek yang mewakili tarikh dan masa semasa:

const currentDate = dayjs();

Anda kemudian boleh merujuk objek ini untuk melakukan pelbagai operasi pada tarikh dan masa.

Memandangkan objek Day.js tidak boleh diubah, sebarang operasi yang akan mengubah suai objek akan mengembalikan tika baharu dengan tarikh dan masa yang dikemas kini.

Format ISO DateTime

Untuk bekerja dengan berkesan dengan tarikh dan masa kita perlu membiasakan diri dengan ISO dan rentetan format DateTimenya.

ISO (Organisasi Antarabangsa untuk Standardisasi) ialah organisasi bukan kerajaan global yang membangun dan menerbitkan piawaian antarabangsa merentas pelbagai industri, memastikan konsistensi dan kualiti di seluruh dunia.

Salah satu piawaian yang disediakan oleh ISO ialah format untuk mewakili tarikh dan masa secara global.

Rentetan format ISO DateTime biasa kelihatan seperti ini:

<script src="path/to/dayjs/dayjs.min.js"></script>

• T antara hari dan jam bertindak sebagai pembatas yang memisahkan tarikh daripada masa dalam rentetan.
• Z di hujung rentetan, yang bermaksud Zulu, menunjukkan bahawa masa adalah dalam UTC (Waktu Sejagat Selaras).

Objek Tarikh JavaScript asli menawarkan kaedah toISOString(), yang membantu menukar tarikh rawak kepada rentetan ISO.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Sekarang kita memahami format ISO DateTime, mari kita terokai beberapa ciri utama pustaka Day.js.

Meneroka Ciri Utama Day.js

Pustaka Day.js dilengkapi dengan pelbagai ciri, beberapa daripadanya boleh digunakan untuk memformat, menghuraikan, memanipulasi, bertanya dan mengesahkan tarikh dan masa. Mari kita terokai cara kita boleh menggunakan ciri utama ini.

Menghuraikan

Ciri penghuraian menyediakan cara yang mudah untuk mencipta objek Day.js baharu dengan tarikh dan masa tertentu. Ini boleh dilakukan dengan menghantar objek Tarikh JavaScript asli, rentetan tarikh atau cap waktu Unix ke fungsi dayjs().

npm install dayjs

Memformat

Ciri pemformatan membolehkan anda memaparkan tarikh dan masa dalam format tertentu. Kaedah berikut digunakan untuk melaksanakan pemformatan pada tarikh dan masa.

• format(): Ini menerima rentetan format dan mengembalikan tarikh dan masa dalam format tersuai itu.

import dayjs from 'dayjs';

Memanipulasi

Ciri memanipulasi membolehkan anda melaraskan tarikh dan masa dengan cara yang berbeza. Ini boleh dilakukan menggunakan kaedah berikut.

• tambah(nombor, unit masa): Menambah jumlah masa yang ditentukan pada tarikh.

const currentDate = dayjs();

• tolak(nombor, Unit masa): Menolak jumlah masa yang ditentukan dari tarikh.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit): Menetapkan tarikh kepada permulaan unit masa tertentu, seperti permulaan hari, minggu, bulan, dsb.

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit): Menetapkan tarikh kepada penghujung unit masa tertentu, seperti penghujung hari, minggu, bulan, dsb.

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Bersoal jawab

Ciri pertanyaan membolehkan anda menyemak dan membandingkan tarikh dan masa. Ini boleh dilakukan menggunakan kaedah berikut yang mengembalikan nilai boolean.

• sebelum(tarikh): Menyemak sama ada tarikh sebelum tarikh yang ditentukan.

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date): Menyemak sama ada tarikh itu selepas tarikh yang ditentukan.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• sama(tarikh): Menyemak sama ada tarikh itu sama dengan tarikh yang ditentukan.

npm install dayjs

• isBetween(date1, date2): Menyemak sama ada tarikh adalah antara dua tarikh yang ditentukan.

import dayjs from 'dayjs';

• isLeapYear(): Menyemak sama ada tahun tarikh tersebut ialah tahun lompat.

const currentDate = dayjs();

Mengesahkan

Ciri pengesahan menyediakan cara untuk menyemak sama ada format tarikh yang diberikan adalah sah atau tidak. Ini boleh dilakukan menggunakan kaedah berikut:

• isValid(): Mengembalikan nilai boolean yang menunjukkan sama ada tarikh dihuraikan dengan betul.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Memperluas fungsi dengan Pemalam

Pustaka Day.js menawarkan pelbagai pemalam bebas yang boleh digunakan untuk melanjutkan fungsi asasnya. Ini membolehkan pembangun melakukan pemformatan tarikh dan masa yang lebih kompleks dengan mudah dalam aplikasi mereka.

Untuk menggunakan pemalam, anda perlu memasukkannya dahulu dan kemudian melanjutkan dayjs menggunakan kaedah extend().

• Untuk memasukkan pemalam melalui CDN:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• Untuk melanjutkan dayjs menggunakan pemalam:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• Untuk memasukkan dan melanjutkan pemalam menggunakan sintaks ES6:

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

Sekarang, mari kita terokai cara kita boleh menggunakan dua pemalam yang tersedia dalam aplikasi.

Pemalam kalendar

Pemalam kalendar menyediakan cara yang mudah untuk memaparkan tarikh dan masa dalam format yang lebih mudah dibaca oleh manusia. Ia sesuai untuk digunakan dalam aplikasi seperti peringatan acara, pengurusan projek, perancang tugas, dll.

Mari kita lihat contoh mudah bagaimana kita boleh menggunakan pemalam ini dalam apl peringatan acara.

Untuk bermula, kita perlu memasukkan pustaka Day.js dan pemalam kalendar melalui CDN.

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

Seterusnya, di dalam fail javascript kami, kami melanjutkan dayjs dengan pemalam kalendar dan memanggil fungsi dayjs() untuk mencipta tika Day.js baharu.

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

Pemalam Kalendar menawarkan pilihan penyesuaian untuk memformatkan cara anda mahu tarikh dan masa dipersembahkan. Anda boleh menentukan format tersuai menggunakan objek dengan sifat tepat berikut:

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

Dalam objek, kami melepaskan perkataan dalam nilai rentetan, dengan membungkusnya di sekeliling [] kurungan segi empat sama.

Dengan menggunakan objek ini, kami kemudian memaparkan tarikh dan masa acara dalam apl peringatan acara:

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

Dalam contoh ini, tarikh acara ditetapkan pada tarikh beberapa bulan lagi dari hari ini. Dalam kes itu, tarikh dipaparkan menggunakan format yang disediakan dalam sifat sameElse objek CustomFormat.

Jika tarikh acara akhirnya menjadi tarikh yang lalu, seperti hari dalam minggu sebelumnya, contohnya:

<script src="path/to/dayjs/dayjs.min.js"></script>

Tarikh kemudiannya dipaparkan menggunakan format yang ditentukan dalam sifat lastWeek objek CustomFormat:

Pemalam RelativeTime

Pemalam RelativeTime ialah pemalam day.js yang biasa digunakan untuk memaparkan perbezaan tarikh dan masa sebagai penyataan relatif dalam antara muka pengguna.

Pemalam menyediakan 4 API yang berbeza untuk memaparkan masa lalu dan masa hadapan:

• .from(date, [withoutSuffix]): Mengembalikan rentetan masa relatif yang menerangkan sejauh mana tarikh dipanggil dari tarikh yang disediakan. Jika hujah withoutSuffix adalah benar, ia mengalih keluar akhiran "ago" daripada output.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix]): Mengembalikan rentetan masa relatif yang menerangkan sejauh mana tarikh yang diberikan daripada tarikh dipanggil. Jika hujah withoutSuffix adalah benar, ia mengalih keluar awalan "dalam" daripada output.

npm install dayjs

• .fromNow([withoutSuffix]): Mengembalikan rentetan masa relatif yang menerangkan sejauh mana tarikh dipanggil dari tarikh dan masa semasa. Jika hujah withoutSuffix adalah benar, ia mengalih keluar akhiran "ago" daripada output.

import dayjs from 'dayjs';

• .toNow([withoutSuffix]): Mengembalikan rentetan masa relatif yang menerangkan sejauh mana tarikh dan masa semasa daripada tarikh dipanggil. Jika hujah withoutSuffix adalah benar, ia mengalih keluar awalan "dalam" daripada output.

const currentDate = dayjs();

Mari kita lihat contoh mudah bagaimana kita boleh menggunakan pemalam RelativeTime untuk memaparkan cap masa bagi ulasan yang disiarkan dalam bahagian ulasan aplikasi.

Seperti biasa, langkah pertama yang perlu diambil ialah memasukkan dayjs dan pemalam relativeTime seperti berikut:

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Kemudian, kami melanjutkan dayjs dengan pemalam relativeTime:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

Selepas itu, kami kemudian boleh memaparkan masa ulasan disiarkan, berhubung dengan Masa semasa:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Pada masa kod di atas dilaksanakan, pembolehubah commentPostedTime telah ditetapkan kepada masa semasa, yang kemudiannya menghasilkan output rentetan masa relatif berikut dalam ulasan:

Sokongan Pelayar dan populariti pembangun

Pustaka Day.js disokong dalam semua penyemak imbas web moden. Ia mempunyai komuniti aktif dengan lebih 19 juta muat turun NPM.

Pustaka ini diselenggara secara aktif dengan lebih 46k bintang github dan 330 penyumbang memastikan ia kekal terkini dan serasi dengan piawaian JavaScript terkini.

Kesimpulan

Kesimpulannya, menggunakan perpustakaan Day.js untuk mengendalikan operasi tarikh dan masa dalam aplikasi anda bukan sahaja mengekalkan kelajuan dan prestasi tetapi juga membantu menjimatkan masa dengan menyediakan fungsi sedia untuk digunakan yang boleh digunakan dengan mudah untuk memformat, pertanyaan , memanipulasi, menghuraikan dan mengesahkan tarikh dan masa.

Atas ialah kandungan terperinci Mengendalikan tarikh dan masa operasi dalam aplikasi anda dengan mudah menggunakan Day.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!