Pusing dengan format Number dan Tanggal di React Native? Coba Solusi Ini

Ketika mulai mempelajari cara membuat Aplikasi dengan React Native ada satu hal yang membuat saya tidak habis pikir. saya menghabiskan waktu lebih dari 2 hari untuk mencari bagaimana cara menampilkan angka dan tanggal sesuai dengan format yang saya inginkan. Padahal itu sangat mudah dilakukan di platform lain.

Beberapa module sudah saya coba tapi tidak ada yang bekerja dengan baik. akhirnya saya menyerah untuk mencari module yang sesuai. saya memutuskan untuk membuat sendiri code untuk memformat angka dan tanggal sehingga gampang untuk saya ubah sesuai keinginan.

Apabila teman teman mempunyai masalah seperti apa yang saya alami, teman-teman bisa mencoba script yang saya buat ini.

Langkah -langkah yang harus dilakukan:

Pertama, buat file js dengan nama apa saja. kalau saya membuat dengan nama FormatNumber.js. di dalam file FormatAngka.js masukan code berikut:

Kedua, import file FormatNumber ini  sebelum menggunakannya. berikut contoh importnya. 

import FormatNumber from './FormatNumber';

Note: sesuaikan path dengan lokasi tempat anda menyimpan file FormatNumber.js

Dibawah ini adalah contoh pemakaiannya untuk format tanggal

<Text >

<FormatNumber value={this.props.tanggal} type="date" format="d-F-Y" />

</Text>

Dan ini adalah contoh penggunaan untuk format angka

<Text >

<FormatNumber value={this.state.jumlah} decimal="0" type="currency" />

</Text>

Penjelasan dari script di atas:

Pada script di atas saya membuat 2 method yaitu FormatingNumber untuk menangani format angka dan  FormatingDate untuk menangani format tanggal. Sekarang mari kita lihat satu per satu.

Method FormatingNumber()

Pertama kita menyimpan parameter value ke variable number. apabila teman-teman belum mengerti tentang apa itu props, silahkan  baca dulu penjelasannya tentang react native props.

var number = this.props.value

Selanjutnya kita membulatkan angka pada variable number sesuai dengan jumlah decimal dari paremeter props.decimal

number = parseFloat(number).toFixed(this.props.decimal)

Untuk angka negatif kita akan buat positif dulu isi variable negatif =true untuk mencatat bahawa angka aslinya adalah negatif

if (number < 0) {

number = number * -1

negatif = true

}

sebelum memformat angka kita ubah dulu angka menjadi string dan di simpan di variable str

var str = number.toString();

Di sini saya akan membalik variable str misal dari 123456 menjadi 654321 ini karena saya akan mengambil karakter dari belakang.

for (var i = str.length - 1; i >= 0; i--) {

nilai += str.charAt(i)

if (step == 3) {

// dan apabila kita sampai pada karakter kelipatan tiga, maka kita tambahkan delimeter.

nilai += delimeter

step = 1

} else {

step += 1

}

}

Langkah selanjutnya adalah membalikan lagi str tadi sehingga str kemblai seperti semula beserta dengan delimeternya.

newString = ''

for (var i = nilai.length - 1; i >= 0; i--) {

newString += nilai.charAt(i)

}

Langkah di bawah ini untuk menghilangkan  apabila ada delimeter di awal angka seperti .123.456

if (newString.charAt(0) == delimeter) {

newString = newString.slice(1)

}

Yang terakhir, apabila angka yang di format negatif, yang bisa kita ketahui dari variable negatif

if (negatif) {

return '(' + newString + ')'

}

return newString

Method FormatingDate()

Pertama kita simpan parameter format ke dalam variable format

var format = this.props.format

Lalu simpan tanggal dalam bentuk string dan kita hanya mengambil 10 karekter pertama sehingga kita akan mendapatkan tanggalnya saja

var dateString = this.props.value.slice(0, 10)

Lalu kita pecah tanggal tadi dengan harinya di simpan di variable day, bulan di variable month dan tahun di variable year

var d = new Date(dateString)

var date = d.getDate()

var day = d.getDay()

var month = d.getMonth()

var year = d.getFullYear()

Selanjutnya membuat tampilan format hari panjang dan pendeknya

switch (day) {

case 0:

namahariL = 'Minggu'

namahariS = 'Min'

break;

case 1:

namahariL = 'Senin'

namahariS = 'Sen'

break;

case 2:

namahariL = 'Selasa'

namahariS = 'Sel'

break;

case 3:

namahariL = 'Rabu'

namahariS = 'Rab'

break;

case 4:

namahariL = 'Kamis'

namahariS = 'Kam'

break;

case 5:

namahariL = 'Jumat'

namahariS = 'Jum'

break;

case 6:

namahariL = 'Sabtu'

namahariS = 'Sab'

break;

default:

break;

}

Selanjutnya membuat format bulan pendek dan panjang

switch (month) {

case 0:

namablnL = 'Januari'

namablnS = 'Jan'

break;

case 1:

namablnL = 'Pebruari'

namablnS = 'Peb'

break;

case 2:

namablnL = 'Maret'

namablnS = 'Mar'

break;

case 3:

namablnL = 'April'

namablnS = 'Apr'

break;

case 4:

namablnL = 'Mei'

namablnS = 'Mei'

break;

case 5:

namablnL = 'Juni'

namablnS = 'Jun'

break;

case 6:

namablnL = 'Juli'

namablnS = 'Jul'

break;

case 7:

namablnL = 'Agustus'

namablnS = 'Ags'

break;

case 8:

namablnL = 'September'

namablnS = 'Sep'

break;

case 9:

namablnL = 'Oktober'

namablnS = 'Okt'

break;

case 10:

namablnL = 'November'

namablnS = 'Nov'

break;

case 11:

namablnL = 'Desember'

namablnS = 'Des'

break;

default:

break;

}

Langkah selanjutnya membuat format dua digit pada tanggal. perintah ini akan merubah 1 menjadi "01"

if (date.toString().length == 1) {

date = '0' + date

}

Perintah di bawah ini akan mengganti variable format dengan variable yang sesuai

//tahun

format = format.replace('y', year.toString().slice(2, 4))

format = format.replace('Y', year)

//hari

format = format.replace('d', date)

format = format.replace('D', namahariS)

format = format.replace('N', namahariL)

//bulan

format = format.replace('n', bln)

format = format.replace('M', namablnL)

format = format.replace('F', namablnS)

Demikianlah cara saya membuat sendiri script untuk format Angka dan Tanggal. semoga artikel ini bisa membantu teman-teman.