TUTORIAL

PHP

Tutorial lengkap belajar membuat range tanggal menggunakan PHP, Bootstrap Datepicker dan Jquery

08-07-2020 06:19:46 BY Alfikri Read 1193x 2 min read

Di tutorial ini kita akan mempelajari bagaimana cara membuat range pada bootstrap datepicker. Harapan saya, setelah membaca tutorial ini anda dapat menerapkannya diberbagai aplikasi.

Tahap#1 : Persiapan

Untuk membuat range menggunakan Bootstrap Datepicker kita harus menyiapkan tool sebagai berikut :

  1. Jquery
  2. Bootstrap Datepicker

Pada tutorial ini saya menggunakan Jquery 3.5.1 dan Bootstrap datepicker v1.9.0

Tahap#2 : Buat File date.php

Silahkan buat sebuat file php dengan nama date.php dan isikan code seperti berikut :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
</head>

<body>
    <input name="tgl" id="tgl" placeholder="Tanggal Berangkat" type="text">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script>
        $("#tgl").datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            endDate: "<?php echo date('Y-m-d'); ?>"
        });
    </script>
</body>

</html>


Penjelasan :

Pada script diatas terlihat bahwa kita hanya menggunakan fungsi sebagai berikut

  1. format : 'yyyy-mm-dd'
    Menampilkan format tanggal seperti 2020-07-08
  2. autoclose : true
    Datepicker close otmatis
  3. todayHighlight : true
    Menyoroti tanggal hari ini
  4. endDate : "<?php echo date('Y-m-d')"
    Membatasi tanggal berdasarkan tanggal sekarang

Tahap#3 : Eksekusi

Silahkan dijalankan dibrowsernya. Untuk hasilnya akan terlihat seperti gambar berikut :

Kesimpulan

Dari tutorial diatas dapat kita ambil kesimpulannya yaitu boostrap date picker sangat mudah digunakan. Hanya dengan menggunakan library Jquery saja kita sudah dapat membuat range tanggal otomatis.

Sekian tutorial dari saya, jika ada pertanyaan silahkan isi dikolom komentar dibawah ini.

Let's Coding...

Demo

About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.




Leave a Reply

Scroll to Top