JQuery

Cara membuat highlight spesifik tanggal dalam jQuery UI Datepicker

Cara membuat highlight spesifik tanggal dalam jQuery UI Datepicker

JQuery UI Datepicker adalah plugin yang digunakan yang menyediakan cara mudah untuk menambahkan kalender ke kolom input untuk memilih tanggal. JQuery Datepicker melekat dengan field input bentuk atau unsur inline untuk membuka kalender interaktif. Juga, itu adalah sangat dapat dikonfigurasi plugin yang memungkinkan Anda menyesuaikan fungsi datepicker sesuai kebutuhan Anda.

Ada beberapa pilihan kustomisasi yang tersedia di jQuery UI Datepicker. Dalam artikel ini, Anda akan tahu menggunakan beforeShowDay opsi konfigurasi yang paling berguna. Opsi beforeShowDay memungkinkan mengubah hari sebelum ditampilkan pada kalender. Di sini kita akan menunjukkan kepada Anda bagaimana untuk menyorot tanggal tertentu dalam jQuery UI Datepicker menggunakan pilihan beforeShowDay.

Fungsionalitas highlight tanggal diperlukan ketika Anda ingin menentukan beberapa tanggal tertentu dalam kalender. Misalnya, Anda ingin menandai peristiwa tanggal pada kalender jQuery yang membantu pengguna untuk mengetahui tentang jadwal acara. Dalam situasi tersebut, Anda dapat dengan mudah mengubah warna latar belakang atau warna teks dan menyoroti rentang tanggal acara tertentu dalam jQuery UI Datepicker Anda yang sudah ada dengan pilihan beforeShowDay.

 

Sebelum Anda mulai, Lihatlah pilihan beforeShowDay jQuery UI Datepicker.

fungsi beforeShowDay tanggal yang diperlukan dan harus mengembalikan array dengan:

 

[0]: benar/salah menunjukkan apakah atau tidak tanggal dipilih

[1]: nama class CSS untuk menambahkan tanggal di cell atau "" untuk presentasi default

[2]: tooltip popup opsional untuk tanggal ini

 

Fungsi ini dipanggil untuk setiap hari dalam datepicker sebelum ditampilkan.

 

JavaScript

Pada pertama, termasuk beberapa diperlukan jQuery dan jQuery UI library

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js">script>

 

Mendefinisikan sebuah array dari tanggal tertentu yang akan disorot dalam kalender. Kode berikut menciptakan array tanggal dan menetapkan tanggal array ke variabel eventDates. 

// An array of dates
var eventDates = {};
eventDates[ new Date( '08/07/2017' )] = new Date( '08/07/2017' );
eventDates[ new Date( '08/12/2017' )] = new Date( '08/12/2017' );
eventDates[ new Date( '08/18/2017' )] = new Date( '08/18/2017' );
eventDates[ new Date( '08/23/2017' )] = new Date( '08/23/2017' );

 

Sekarang menggunakan beforeShowDay pilihan untuk jQuery UI datepicker, yang akan dipanggil untuk setiap hari sebelum membuat itu dalam kalendar. Dalam fungsi beforeShowDay, kami akan memeriksa apakah tanggal cocok dengan tanggal tertentu dan menambahkan class untuk data jika kecocokan ditemukan. Class ini ditambahkan akan membantu Anda untuk mengubah warna latar belakang atau warna teks tanggal tertentu dalam kalender.

// datepicker
$('#datepicker').datepicker({
    beforeShowDay: function( date ) {
        var highlight = eventDates[date];
        if( highlight ) {
             return [true, "event", 'Tooltip text'];
        } else {
             return [true, '', ''];
        }
    }
});

 

Kode JavaScript yang lengkap untuk menyorot tanggal tertentu.

$( function() {
    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
    eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
    eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
    eventDates[ new Date( '08/23/2016' )] = new Date( '08/23/2016' );

    // datepicker
    $('#datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [true, "event", 'Tooltip text'];
            } else {
                 return [true, '', ''];
            }
        }
    });
});

 

HTML

JQuery UI Datepicker diikat dengan input field atau inline div.

Calendar : <div id="datepicker">div>

 Atau

Date: <input type="text" id="datepicker">

 

CSS

Kode CSS berikut akan menyoroti tanggal tertentu jQuery UI Datepicker kalender.

.event a {
    background-color: #5FBA7D !important;
    color: #ffffff !important;
}

 

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.