Online Web Tutorial

Membuat Tanggal Bahasa Indonesia dengan JQuery di WapBlog.ID

FSodic.ID - Halo mblo selamat sore, gimana wifi tetangga masih lancar dan aman? Sesuai dengan janji saya diposting sebelumnya di blog Official WapBlog.ID tentang tutorial membuat tanggal dalam Bahasa Indonesia dimana semua tahu bahwa bahasa Default blog di WapBlog.ID menggunakan Bahasa Inggris. Mungkin ada yang bertanya kenapa gak sekalian kemaren atau kenapa gak dibahas diblog official, itu karena Blog Official ditujukan untuk memberikan informasi dan update terbaru WapBlog.ID sementara saya di blog ini membuat tutorial-tutorial.

Kita lanjut ke tutorial, sesuai dokumentasi tema WapBlog.ID bahawa <wb:post_time_c> merupakan child tags yang otomatis menampilkan tanggal posting baik di Index maupun di Single Post dengan zona Waktu GMT+0, bagi kalian yang berada di zona waktu WIB GMT+7, WITA GMT+8, dan WIT GMT+9. GMT+0 sendiri digunakan untuk lebih memudahkan convert-convert seperti tutorial ini dan tidak perlu melakukan ini-itu untuk menjadikan GMT+0.

Saya tegaskan sekali lagi bahwa tutorial ini berjalan dengan JavaScript yang menggunakan library JQuery yang berarti tidak ada perubahan pada bentuk asli dari format tanggal blog kalian.

Oke langsung saja kita siapkan function Javascript-nya seperti ini:

function dateID(){
  $('time.time-id').each(function(){
    if(typeof $(this).attr('date-time') == 'string'){
      var a = $(this).attr('date-time'), b = new Date(a);
      $(this).text(idDay(b.getDay())+', '+b.getDate()+' '+idMonth(b.getMonth())+' '+b.getFullYear()+' '+cleanTime(b.getHours())+':'+cleanTime(b.getMinutes()));
    }
  });
}
function cleanTime(a){
  if(a.toString().length == 1){
    return '0'+a;
  }
  return a;
}
function idMonth(a){
  var b = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
  return b[a];
}
function idDay(a){
  var b = new Array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu');
  return b[a];
}

function dateID() merupakan function utama yang akan kita gunakan sebagai untuk mencari query selector time.time-id yang diloop menggunakan each().
function idMonth() merupakan function yang berfungsi meng-convert bulan kedalam Bahasa Indonesia.
function idDay() merupakan function yang berfungsi meng-convert hari kedalam Bahasa Indonesia.
function cleanTime() merupakan function yang bertugas menambahkan angka 0 (nol) didepan string yang memiliki panjang karakter 1.

Panggil dateID() dalam ready() yang mana dateID akan dieksekusi setelah halaman selesai dimuat.
Lebih kurang seperti ini:

$(document).ready(function(){
  dateID();
});

Nah bagi kalian yang sudah menggunakan jquery pada template kalian tidak perlu membuat function ready() baru cukup masukan function dateID(); saja.

Selanjutnya kita masuk kebagian template, Index atau Single Post dan buat tag html time. Seperti ini:

<time date-time="<wb:post_time_c>" class="time-id"><wb:post_time></time>

Disini kalian bebas apabila ingin mengubah properti class menjadi class template kalian masing-masing. Secara default, kalian akan melihat waktu posting kalian seperti ini:

Berikut adalah hasil akhir

Apabila kalian tidak menggunakan function cleanTime() pada jam dan menit maka akan tampil seperti ini

Yap jam dan menit disini secara default akan tampil 0, 1, 2, 3, 4, 5, .... 59 dan dengan cleanTime() ini kalian bisa mengubah ke format 00, 01, 02, 03, 04, 05, .... 59.

Saya ingatkan juga bahawa tanggal tidak saya convert dengan cleanTime() yang berarti tanggal akan tampil 1, 2, 3, 4, .... 31 (sesuai jumlah hari pada bulan).

Dan berikut full-code dari tutorial diatas

<script>$(document).ready(function(){
  dateID();
});
function dateID(){
  $('time.time-id').each(function(){
    if(typeof $(this).attr('date-time') == 'string'){
      var a = $(this).attr('date-time'), b = new Date(a);
      $(this).text(idDay(b.getDay())+', '+b.getDate()+' '+idMonth(b.getMonth())+' '+b.getFullYear()+' '+cleanTime(b.getHours())+':'+cleanTime(b.getMinutes()));
    }
  });
}
function cleanTime(a){
  if(a.toString().length == 1){
    return '0'+a;
  }
  return a;
}
function idMonth(a){
  var b = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
  return b[a];
}
function idDay(a){
  var b = new Array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu');
  return b[a];
}</script>

Oke saya rasa cukup jelas sekali dengan tutorial diatas, kalo kalian masih gak paham itu keterlaluan ya mblo Sampai berjumpa ditutorial-tutorial lain.