Cara Merubah Bahasa Detepticker di Bootstrap

Publish Date : 22-11-2016 , dibaca 10654 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial Kali ini admin akan menjelaskan cara merubah Bahasa Detepticker di Bootstrap menjadi bahasa indonesia, awalnya.. detepticker bootstrap berbahasa inggris dalam menampilkan nama hari, bulan dan tahun.. Nah disini kita akan mengubah Nama bulan, hari di detepticker bootstrap menjadi bahasa indonesa..

untuk lebih jelasnya perubahan bahasa di detepticker botstrap bisa dilihat disini :

mengubah bahasa detepticker bootstrap

 

  • Cari format bahasa yang kita inginkan di CDNJS.com
  • Setelah memilih bahasa yang diinginkan copy script yang ada di cdnjs.com tadi.
  • Masukkan link script yang telah di copy tadi kedalam stuktur HTML tepat berada didalam “<Head>disini </Head>”

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js

Lalu buat form untuk memunculkan bootstrap datepickernya.

<div class="container">
<h3>Bahasa Indonesia</h3>
<div class="form-group col-md-3">
<div class='input-group date datepicker' >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>

 Kemudian sisipkan script code javascript dibawah ini didalam “<Head>disini</Head> seperti dibawah ini.

$(document).ready(function () {
    $('.input-group.date').datetimepicker({
        locale: 'id',
    });
});

Pastikan file dibawah ini sudah ada pada code anda, untuk memanggil file yang dibutuhkan, jika anda tidak mempunya di local, gunakan code dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js"></script>

 Demo

 

Produk Rekomendasi

Artikel Terkait

Diskusi



wa