Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Menggunakan Luxon untuk Tanggal dan Waktu di JavaScript

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Bekerja dengan tanggal dan waktu dapat menjadi tugas yang membingungkan bagi pengembang yang dimulai dengan JavaScript. Dalam tutorial ini, Anda akan belajar tentang perpustakaan JavaScript baru yang disebut Luxon yang membuatnya mudah bekerja dengan tanggal dan waktu dalam JavaScript.

Sepanjang tutorial ini, Anda akan belajar tentang berbagai fitur perpustakaan Luxon dan bagaimana menggunakannya dalam proyek aplikasi web Anda.

Persiapan

Anda akan membuat proyek Angular dan akan melihat bagaimana menggunakan pustaka Luxon untuk manipulasi tanggal dan waktu di Angular. Mari kita mulai dengan membuat aplikasi web Sudut.

Setelah Anda membuat proyek, arahkan ke direktori proyek dan buat komponen baru bernama luxdate.

Anda akan memiliki LuxdateComponent yang dibuat dan ditambahkan ke modul aplikasi di file app.module.ts. Hapus AppComponent default dari aplikasi dengan menghapus file komponen dari folder src / app. Di sini adalah bagaimana file app.module.ts terlihat:

Ubah file src / index.html untuk menambahkan LuxdateComponent.

Simpan perubahan di atas dan mulai server.

Anda akan memiliki aplikasi yang berjalan di http: // localhost: 4200 /.

Mari impor pustaka Luxon ke dalam aplikasi Anda.

Setelah Anda menginstal Luxon di aplikasi Angular, impor dalam komponen LuxdateComponent. Sekarang Anda siap menggunakan pustaka Luxon di proyek Anda.

Waktu Lokal & UTC Waktu Menggunakan Luxon

Mari kita lihat cara mendapatkan waktu lokal menggunakan pustaka Luxon. Impor DateTime dari perpustakaan Luxon.

Di dalam LuxdateComponent, mendefinisikan sebuah variabel yang disebut localDatetime.

Setel nilai variabel localDatetime seperti yang ditunjukkan:

Tampilkan variabel localDatetime dalam file luxdate.component.html.

Simpan perubahan dan Anda akan memiliki waktu lokal ditampilkan di halaman web.

Tanggal dan waktu yang ditampilkan di atas adalah waktu setempat dengan zona waktu yang dilampirkan. Anda dapat memformat tanggal dan waktu lebih jauh untuk membuatnya lebih intuitif.

Format tanggal dan waktu untuk ditampilkan menggunakan baris kode di bawah ini.

Simpan baris kode di atas, dan Anda akan memiliki tanggal dan waktu berikut ditampilkan.

Demikian pula, metode .utc dalam objek DateTime memberikan waktu UTC.

Tambahkan variabel baru di LuxdateComponent untuk mengatur waktu UTC.

Set nilai variabel utcDatetime menggunakan objek Datetime Luxon.

Render variabel utcDatetime dalam file luxdate.component.html seperti yang ditunjukkan:

Tambahkan gaya CSS berikut ke file luxdate.component.css.

Simpan perubahan di atas, dan Anda akan dapat melihat waktu lokal dan waktu UTC menggunakan pustaka Luxon.

Luxon Library - Local Time UTC Time

Untuk menampilkan waktu lokal dan waktu UTC dengan detik yang disertakan, Anda dapat menggunakan DATETIME_FULL_WITH_SECONDS. Berikut adalah tampilannya:

Simpan perubahan, dan Anda akan memiliki waktu lokal dan waktu UTC ditampilkan dengan detik.

Luxon Library - Local UTC Time With Seconds

Informasi Tanggal dan Waktu Umum Menggunakan Luxon

Perpustakaan Luxon menyediakan kelas Info yang membantu mendapatkan informasi umum mengenai tanggal dan waktu.

Ketika berhadapan dengan tanggal dan waktu, cukup umum bahwa Anda mungkin memerlukan daftar bulan dalam setahun. Menggunakan kelas Info, Anda bisa mendapatkan daftar bulan sebagai larik.

Impor kelas Info di file luxdate.component.ts.

Deklarasikan variabel untuk daftar bulan dan menginisialisasi.

Atur daftar bulan dari kelas Info.

Tambahkan HTML berikut ke file luxdate.component.html untuk menampilkan konten variabel months.

Simpan perubahan di atas, dan Anda akan memiliki daftar bulan yang diisi.

Luxon Library - Months

Demikian pula, menggunakan metode weekdays memberi Anda daftar hari kerja.

Simpan perubahannya, dan Anda akan memiliki hari kerja yang tercantum di layar.

Luxon juga menyediakan opsi untuk mendapatkan daftar meridiems menggunakan metode meridiems.

Ubah kode HTML di luxdate.component.html untuk menampilkan weeks dan meridians.

Simpan perubahan, dan Anda akan dapat melihat minggu dan meridian yang ditampilkan.

Luxon Library - Weeks Meridians

Menangani Internasionalisasi Menggunakan Luxon

Luxon menyediakan kelas Setting, menggunakan yang mana Anda dapat menangani keseluruhan perilaku Luxon. Mari kita atur pengaturan lokal default dari Luxon ke el.

Impor kelas Setting di file luxdate.component.ts.

Dalam metode konstruktor LuxdateComponent, tetapkan lokal default seperti yang ditunjukkan:

Simpan perubahan, dan Anda akan memiliki lokal default diatur ke el.

Luxon - Setting Locale

Info Zona Menggunakan Luxon

Perpustakaan Luxon menyediakan antarmuka untuk mendapatkan rincian terkait dengan zona objek DateTime tertentu. Untuk menggunakannya, Anda perlu mengimpor Zone dari pustaka Luxon.

Mari coba gunakan Zone pada objek Luxon DateTime. Buat objek DateTime Luxon lokal.

Anda dapat menggunakan antarmuka Zone pada dateObj untuk mendapatkan nama zona. Tambahkan kode berikut untuk mencatat nama zona.

Simpan perubahan, dan saat menjalankan aplikasi, Anda akan dapat melihat nama zona yang dicatat di konsol browser.

Mari mencoba untuk mencetak nama zona objek UTC DateTime.

Kode di atas akan mencetak nama zona sebagai UTC.

Antarmuka Zona Luxon menyediakan metode untuk membandingkan dua timezones. Mari coba bandingkan timezone dari objek DateTime localObj dan utcObj.

Seperti yang terlihat pada kode di atas, Anda telah menggunakan metode zone.equals untuk membandingkan zona. Simpan perubahan dan coba jalankan aplikasi, dan Anda akan mendapatkan hasilnya.

Interval dalam Luxon

Interval in Luxon adalah pembungkus untuk dua titik akhir DateTime yang dapat dimanipulasi menggunakan metode Luxon. Dari dokumentasi resmi:

Objek Interval mewakili interval waktu setengah terbuka, di mana setiap titik akhir adalah DateTime. Secara konseptual, ini adalah wadah untuk dua titik akhir, disertai dengan metode untuk membuat, menguraikan, menginterogasi, membandingkan, mengubah, dan memformatnya.

Ada beberapa cara berbeda dalam menciptakan interval menggunakan Luxon. Mari kita lihat cara membuat interval menggunakan objek DateTime awal dan akhir.

Interval Impor dari Luxon di LuxdateComponent.

Membuat sebuah objek start DateTime dan sebuah objek end DateTime.

Seperti yang terlihat pada kode di atas, Anda membuat startDate menggunakan waktu lokal saat ini dan endDate dengan menambah waktu lokal dengan 15 menit.

Buat interval menggunakan metode fromDateTimes.

Simpan perubahan di atas, dan saat menjalankan aplikasi, Anda akan memiliki interval login.

Luxon Library Interval

Sekarang Anda dapat menerapkan metode Luxon untuk memanipulasi atau memformat waktu mulai dan akhir dalam objek interval. Katakanlah Anda ingin memeriksa nama zona waktu mulai dalam interval. Anda dapat melakukannya dengan menggunakan properti zone.name seperti yang ditunjukkan:

Anda akan memiliki output berikut yang dicatat di konsol browser:

Membuat Durasi Menggunakan Luxon

Luxon menyediakan beberapa metode untuk menciptakan durasi. Untuk memulai dengan membuat durasi, Anda perlu mengimpor Duration di LuxdateComponent Anda.

Setelah diimpor, Anda dapat menggunakan metode fromMillis untuk membuat durasi dengan menentukan milidetik.

Simpan perubahan, dan saat menjalankan aplikasi, Anda akan memiliki durasi fiveMinute di atas yang dicatat.

Duration Using MilliSeconds

Anda juga dapat menggunakan objek DateTime lain untuk membuat durasi menggunakan metode fromObject. Berikut ini bagaimana kode terlihat:

Simpan perubahan, dan Anda akan memiliki durasi login di konsol browser.

Duration Using DateTime Object

Membungkusnya

Dalam tutorial ini, Anda melihat bagaimana memulai dengan menggunakan pustaka Luxon untuk bekerja dengan tanggal dan waktu dalam proyek web Sudut. Anda belajar bagaimana menangani waktu lokal dan waktu UTC, dan cara membuat interval dan durasi menggunakan Luxon.

Untuk informasi mendalam tentang penggunaan pustaka Luxon, saya akan merekomendasikan membaca dokumentasi resmi.

Bagaimana pengalaman Anda belajar bekerja dengan Luxon? Beri tahu kami pendapat Anda di komentar di bawah.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.