fromnow-js
v1.0.0
Published
FromNow.js merupakan library javascript untuk membuat tanggal menjadi seperti di sosmed, contoh: Baru saja, 3 jam yang lalu, dsb.
Downloads
232
Readme
About
FromNow.js merupakan library javascript untuk membuat tanggal menjadi seperti di sosmed, contoh: Baru saja, 3 jam yang lalu, dsb.
Usage
- Pasang library
fromnow.jsataufromnow.min.js.- Opsi 1: Copy isi dari library lalu paste ke dalam script js kalian
- Opsi 2: Panggil library secara langsung ke dalam HTML kalian
<body> <script src="fromnow.js"></script> </body> - Copy script berikut ini ke HTML kalian, pastikan script ini berada diatas script js library. Silakan atur parameter yang tersedia sesuai keinginan.
<script> var fromNowConfig = { selector : '.from-now', class : 'opacity-0', options : { monthFull : [ 0 ], second : [ 30, (86400*7) ], separator : [ ' ', ':', ' · ' ], // ----- if language is english ----- // language : 'en', // editorial : [ 'ago', 'to go' ], // unit : [ 'A few moments ago', 'second', 'minute', 'hour', 'day', 'month', 'year' ], // ----- if language is indonesia ----- language : 'id', editorial : [ 'yang lalu', 'lagi' ], unit : [ 'Baru saja', 'detik', 'menit', 'jam', 'hari', 'bulan', 'tahun' ], } } </script> <script src="fromnow.js"></script> - Gunakan format berikut ini untuk penulisan pada HTML-nya.
Contoh:<time class="from-now opacity-0" datetime="{date}">-</time><time class="from-now opacity-0" datetime="2023-12-31T23:59:59">-</time>
Note
Library ini akan optimal ketika kalian menggunakan TailwindCSS karena menggunakan .opacity-0. Jika kalian tidak menggunakan TailwindCSS, maka kalian harus membuat style tambahan yang isinya sebagai berikut :
.opacity-0 {
opacity: 0;
}Dummy
Jika kalian seorang web designer, maka cocok untuk menggunakan script dummy-nya juga, karena tanggal pada slicing HTML kalian akan selalu dinamis sehingga library ini dapat berjalan dengan baik.
Untuk konten yang sudah terbit (contoh: artikel, berita), silakan gunakan :
<script src="fromnow-past-dummy.js"></script>Untuk konten yang belum terjadi (contoh: jadwal, agenda), silakan gunakan :
<script src="fromnow-future-dummy.js"></script>Letakkan diatas script config
Example
<body>
<main>
<h1>Title</h1>
<time class="from-now opacity-0" datetime="2023-12-31T23:59:59">-</time>
<p>Lorem ipsum minim nulla ad nisi aliqua est amet labore exercitation...</p>
</main>
<!-- START - Only for demo -->
<script src="fromnow-past-dummy.js"></script>
<!-- END - Only for demo -->
<script>
var fromNowConfig = {
selector : '.from-now',
class : 'opacity-0',
options : {
monthFull : [ 0 ],
second : [ 30, (86400*7) ],
separator : [ ' ', ':', ' · ' ],
language : 'id',
editorial : [ 'yang lalu', 'lagi' ],
unit : [ 'Baru saja', 'detik', 'menit', 'jam', 'hari', 'bulan', 'tahun' ],
}
}
</script>
<script src="fromnow.min.js"></script>
</body>Copyrights
© 2023 FromNow.js - Semoga Bermanfaat 😊