Làm nổi bật các ngày trong thanh công cụ ngày tháng jquery UI

Question

Cách tôi có thể sử dụng trướcShowDay để làm nổi bật ngày trong trình chỉnh sửa ngày tháng của giao diện người dùng jQuery. Tôi có ngày mảng sau

Array 
(
    [0] => 2011-07-07 
    [1] => 2011-07-08 
    [2] => 2011-07-09 
    [3] => 2011-07-10 
    [4] => 2011-07-11 
    [5] => 2011-07-12 
    [6] => 2011-07-13 
) 

Answer 1

tôi đã giải quyết được vấn đề sử dụng

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"]; 
var date = new Date(); 
jQuery(document).ready(function() { 
    $("#dateselector").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     beforeShowDay: function(date) { 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      for (i = 0; i < disabledDays.length; i++) { 
       if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) { 
        //return [false]; 
        return [true, 'ui-state-active', '']; 
       } 
      } 
      return [true]; 

     } 
    }); 
}); 

Answer 2

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

Bạn so sánh các tham số ngày trong beforeShowDay với ngày bạn đã có trong mảng của bạn, và nếu có một trận đấu bạn quay trở lại một mảng theo quy định tại liên kết ở trên.

Trong mảng bạn trả về từ trướcShowDay, phần tử thứ hai được sử dụng để đặt tên lớp sẽ được sử dụng vào ngày, sau đó bạn có thể sử dụng css để đặt kiểu cho lớp đó.

Answer 3

Hãy xem tài liệu.

beforeShowDay Chức năng mất một ngày như một tham số và phải trả về một mảng với [0] bằng đúng/sai cho thấy có hay không ngày này là lựa chọn, [1] bằng một tên lớp CSS (s) hoặc '' cho bản trình bày mặc định và [2] chú giải công cụ bật lên tùy chọn cho ngày này. Nó được gọi cho mỗi ngày trong datepicker trước khi nó được hiển thị.

Điều này có nghĩa rằng bạn cần phải tạo một hàm rằng sẽ mất một ngày và trả về một mảng các tham số nơi giá trị là:

1. boolean - chỉ ra nếu ngày có thể được chọn
2. chuỗi - tên của lớp css sẽ được aplied đến ngày
3. chuỗi - một popup tooltip tùy chọn cho ngày này

đây là một exa mple:

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates. 

$('#whatever').datepicker({ 
    beforeShowDay: function(date) { 
     // check if date is in your array of dates 
     if($.inArray(date, your_dates)) { 
     // if it is return the following. 
     return [true, 'css-class-to-highlight', 'tooltip text']; 
     } else { 
     // default 
     return [true, '', '']; 
     } 
    } 
}); 

và bây giờ bạn có thể thêm các phong cách để làm nổi bật ngày

<style> 
    .css-class-to-highlight{ 
     background-color: #ff0; 
    } 
</style> 

Answer 4

Tìm thấy câu trả lời đã bỏ phiếu nhất không làm việc. Cập nhật mã một chút để làm cho nó hoạt động. $ .inArray() chủ yếu tìm kiếm indexOf(). Ngoài ra, chúng tôi không thể so sánh hai ngày trực tiếp cho sự bình đẳng. tham khảo: Compare two dates with JavaScript

function inArrayDates(needle, haystack){ 
    var found = 0; 
    for (var i=0, len=haystack.length;i<len;i++) { 
     if (haystack[i].getTime() == needle.getTime()) return i; 
      found++; 
     } 
    return -1; 
} 

Và cập nhật các chức năng chấp nhận như

if(inArrayDates(date, markDates) != -1) { 
      return [true, 'selected-highlight', 'tooltip here']; 
      } else { 
      return [true, '', '']; 
      } 

Answer 5

Ngày trong JS là trường hợp của đối tượng Date, vì vậy bạn không thể kiểm tra đúng nếu ngày đều bình đẳng sử dụng == hoặc ===.

Giải pháp đơn giản:

var your_dates = [ 
    new Date(2017, 4, 25), 
    new Date(2017, 4, 23) 
]; 

$("#some_selector").datepicker({ 
    beforeShowDay: function(date) { 
     are_dates_equal = d => d.getTime() === date.getTime(); 
     if(your_dates.some(are_dates_equal)) { 
      return [true, 'ui-state-active', '']; 
     } 
     return [true, '', '']; 
    } 
})