jQuery datepicker conflict dengan datepicker bootstrap?

Awalnya saya membuat di menu paling atas datepicker dengan datepicker bootstrap. Lalu karena permintaan klien untuk dibuatkan satu datepicker lagi yang support multiple datepicker, saya gunakan MDP. Alhasil, datepicker bootstrap saya ketimpa dengan code dan style dari MDP. Lalu bagaimana cara solve nya?

MPD diambil dari jquery UI sedangkan datepicker bootstrap lain, tapi karena mereka menggunakan kata “datepicker” yang sama, akhirnya conflict. Cara yang masuk logika adalah, kita ganti saja nama kata “datepicker” salah satu plugin tersebut agar tidak salah panggil.

Caranya, pakai tag nya jquery yg noConflict

if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;
}

Jika datepicker conflict, buat nama baru dengan bootstrapDP. Lalu kalau ingin membuat bootstrap datepicker, panggil dengan bootstrapDB

$('#datepicker').bootstrapDP({
                format: 'dd/mm/yyyy',
                startDate: 'd',
                clearBtn: true
            })
            .on('clearDate',function(e) {
                if(cart_count > 0) {
                    var appr = confirm('Cart akan kosong jika anda mengganti delivery date?');
                    if(appr) {
                        reset_delivery_date();
                    } else {
                        window.location.reload();
                    }

                } else {
                    reset_delivery_date();
                }
            })
            .on('changeDate', function(e) {
                // var deliverydate = start.format('YYYY-MM-DD');
                console.log(e);
                $(this).datepicker('hide');

                if(cart_count > 0) {
                    var appr = confirm('Cart akan kosong jika anda mengganti delivery date?');
                    if(appr) {
                        set_delivery_date( $(this).val() );
                    } else {
                        window.location.reload();
                    }
                } else {
                    set_delivery_date( $(this).val() );
                }
                
            });

Jika ingin menggunakan datepicker jquery ui, tinggal pakai kata “datepicker” aja seperti biasa.

Catatan khusus, pastikan jquery ui dulu yang diload sebelum bootstrap datepicker.

Semoga bisa manfaat 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.