Hỏi về Jquery UI Datepicker

aclongmadao · June 25, 2018, 11:05am

Mình đang làm 1 plugin cho wp sử dụng datepicker để click vào calendar thì hiển thị ra event.
Tuy nhiên hiện tại có yêu cầu những ngày ko có event thì hide hoặc ngày có event thì highlight lên. Mình có tham khảo 1 số chỗ sử dụng beforeShowDay nhưng ko biết cách làm. Mong nhận được tham khảo của các pro (mình mới lần đầu sử dụng jquery nên chủ yếu đi tham khảo).

jQuery(document).ready(function($) {	
	jQuery( ".tt_date_picker" ).datepicker({
		inline: true,
    	altField: '#d',
    	dateFormat: 'dd/mm/yy'
    });
    $('.tt_date_picker').change(function(){
   		var select_date = $(this).val();
		jQuery.ajax({
			type: 'POST',
			url: ajax_object.ajax_url,
			data: { 
				action: "ajax_load_content_event",
				select_date: select_date,
		 	},
		 	beforeSend: function(){
               //image_loading.removeClass('hidden');
           	},

			success: function(data) {
				$('#event_content').html(data);
				$slider ();
				//location.reload();
			}
		});
	});
});

vietlubu · June 27, 2018, 2:58am

Dùng beforeShowDay là đúng rồi bạn.
Bạn thao khảo code này:

// Đây là list nhưng ngày có event. Bạn gọi ajax hay làm gì để có thì mình không biết. cứ có 1 array như này là được.
var events= ["2018/06/18", "2018/06/17", "2018/06/16"];


$( function() {
    $( "#datepicker" ).datepicker({
      beforeShowDay: function(date) {
        
        // Loop qua tất cả các ngày trong array events trên
        for (var i = 0; i < events.length; i++) {
            if (new Date(events[i]).toString() == date.toString()) {
              // Đúng ngày thì trả về true kèm class  
              return [true, 'event-date'];
            }
        }
        
        // Khác ngày event thì trả về false để disable
        return [false];
      }
    });  
} );

Trong code này, với những ngày là event mình trả về kèm class event-date bạn CSS nó để highlight hay làm gì thì tùy nhé.
Demo đây: https://codepen.io/anon/pen/yERNwb

aclongmadao · June 27, 2018, 4:37am

Cám ơn mình hôm qua đã tìm ra cách vì dùng chung ajax để click truy vấn ngày đó có event ko.

`// An array of highlighting dates ( ‘dd-mm-yyyy’ )
var highlight_dates = [“28/6/2018”,“30/6/2018”,“1/6/2018”,“15/6/2018”,];

/* Datepicker: wd_add_param_vc.php */
jQuery(document).ready(function($) {
jQuery( “.tt_date_picker” ).datepicker({
inline: true,
altField: ‘#d’,
dateFormat: ‘dd/mm/yy’,

    beforeShowDay: function(date){
        var month = date.getMonth()+1;
        var year = date.getFullYear();
        var day = date.getDate();

        // Change format of date
        var newdate = day+"/"+month+'/'+year;

        // Set tooltip text when mouse over date
        var tooltip_text = "New event on " + newdate;

        // Check date in Array
        if(jQuery.inArray(newdate, highlight_dates) != -1){
            return [true, "highlight", tooltip_text ];
        }
        return [true];
    }
});`