Cara Reset Tanggal Datepicker dengan jQuery

Cara Reset Tanggal Datepicker dengan jQuery - Datepicker merupakan sebuah plugin yang bisa kita gunakan untuk mempermudah dalam menentukan tanggal, ini sama hal nya dengan menambahkan kalender padahalaman website. Ada banyak sekali plugin Datepicker yang bisa di manfaatkan untuk di terapkan pada halaman website salah satunya adalah dari jQuery ini. Namun, pada pembahasan kali ini adalah saya akan ajarkan bagaimana Cara Reset Tanggal Datepicker dengan jQuery. Baiklah langsung saja simak langkah - langkah nya berikut ini.

Kode HTML

Baik, langkah pertama buat satu file index.html untuk membuat layout Datepicker dalam kasus ini saya menggunakan framework Bootstrap untuk mengatur layout Datepicker.

<body>
    <div class="container mt-3">
        <div class="row">
            <div class="card">
                <div class="card-header font-weight-bold bg-info text-white">jQuery - Reset Date Picker</div>
                <div class="card-body">
                    <div class="form-row mb-2">
                        <div class="col">
                            <input class="form-control" type="text" placeholder="Dari tanggal" id="from">
                        </div>
                        <div class="col">
                            <input class="form-control" type="text" placeholder="Sampai tanggal" id="to">
                        </div>
                    </div>
                    <input type="button" value="Reset Date" class="btn btn-block font-weight-bold bg-warning text-white" id="reset-date">
                </div>
            </div>
        </div>
    </div>
</body>

Kode jQuery

Setelah membuat layout seperti diatas, langkah selanjutnya adalah membuat fungsi untuk tombol reset Datepicker dengan sintak jQuery seperti berikut.

<script>
    var $date = $('#from, #to').datepicker();

    $('#reset-date').on('click', function () {
        $date.datepicker('setDate', null);
    });
</script>

Library Bootstrap, Datepicker, jQuery

Jangan lupa untuk menyisipkan library dari Bootstrap, Datepicker dan jQuery supaya semua fungsi bisa berjalan.

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

    <!-- jQuery, Datepicker js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Setelah semua sintak HTML, jQuery telah diketikan, langkah selanjutnya simpan semua perubahan diatas kemdian buka pada browser masing - masing untuk melihat hasil akhir nya, maka tampilan Datepicker akan terlihat seperti gambar di bawah ini. Jika kalian isi tanggal maka kalian juga bisa reset tanggal pada Datepicker dengan cara klik tombol reset. 

Cara Reset Tanggal Datepicker dengan jQuery

Baiklah, cukup sekian tutorial jQuery sederhana tentang bagaimana Cara Reset Tanggal Datepicker dengan jQuery, semoga tutorial ini bisa bermanfaat, selamat mencoba dan sampai jumpa di artikel dumetschool selanjutnya. :)

27 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat