Cara Merubah Format Bahasa Bootstrap Datepicker


datepicker-indonesia

Assalamualaikum, semoga dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana caranya merubah tampilan bootstrap datepicker mengikuti lokasi atau negara yang diingingkan. Seperti contoh, kita menggunakan bootstrap datepicker dan ingin merubahnya menggunakan format bahasa indonesia, secara default bootstrap datepicker menggunakan format bahasa inggris. Cukup mudah untuk merubahnya anda cukup mengikuti langkah-langkah dibawah ini :

  • 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>
                                                                        

</div>

  • Kemudian sisipkan script code javascript dibawah ini didalam “<Head>disini</Head> seperti dibawah ini.
 
        $(document).ready(function () {
            $('.input-group.date').datetimepicker({
                locale: 'id',
            });
        });
    

Keterangan :

  • Pada script javascript, locale: ‘id’ anda dapat merubah id menjadi de (bahasa jerman) dll.
  • Pastikan anda sudah memasukkan atau memanggil link/file bootstrap.min.css,  jquery.min.js, bootstrap-datetimepicker.min.css, moment.js, dan bootstrap-datetimepicker.min.js didalam head.
	<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 | Download [Dropbox] | Download [Mediafire]

Semoga bermanfaat dan terimakasih atas kunjungannya 🙂

 

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

 

 

 

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s