Cách nào để thêm văn bản vào ô di động datepicker jquery ui?

Question

Tôi cần phải hiển thị văn bản tùy chỉnh vào một số ngày tại Jquery UI datepicker, để chính xác hơn, để hiển thị một mức giá cụ thể cho một số ngày. Ý tưởng của tôi là sử dụng trướcShowDay để đính kèm giá cụ thể trong các tiêu đề của những ngày như vậy và sau đó, trong beforeShow để kiểm tra từng td và đặt văn bản của tiêu đề vào ô. Ví dụ:

var m, d, y, checkDate, specificPrice = '';  
var specificPrices = {"2013-3-8":"300 EUR", "2013-2-26":"263 EUR"} 

$('#my-datepicker').datepicker({ 
    beforeShowDay:  function checkAvailable(date) { 
    m = date.getMonth(); 
    d = date.getDate(); 
    y = date.getFullYear(); 
    checkDate = y + '-' + (m+1) + '-' + d; 
    if(specificPrices[checkDate]){ 
     specificPrice = specificPrices[checkDate]; 
    }else{ 
     specificPrice = ''; 
    } 
    return [true, "", specificPrice]; 
}, 
    beforeShow: function(elem, inst){ 
     $('table.ui-datepicker-calendar tbody td', inst.dpDiv).each(function(){ 
      var calendarPrice = $(this).attr('title'); 
      if(calendarPrice != undefined){ 
       $(this).find('a').append('<span class="calendar-price">' + calendarPrice + '<span>'); 
      } 
     });   
    } 
}); 

Điều này sẽ hiển thị giá trên lịch đầu tiên hiển thị (trước tháng/năm được thay đổi) và chỉ cho lịch nội tuyến.

Tôi cần giá được hiển thị trên lịch không trực tuyến và vào bất kỳ thay đổi tháng/năm nào.

Tôi đã thử một số biến thể khác và cố gắng sử dụng onChangeMonthYear, nhưng không thành công cho đến thời điểm này.

Cảm ơn sự quan tâm, ý tưởng của bạn được hoan nghênh.

Answer 1

Tôi đã xem kịch bản tương tự này và nghĩ rằng tôi sẽ đăng giải pháp của mình cho một trình đếm ngày nội tuyến nhưng cũng nên hoạt động với một trình ghi ngày tháng bật lên.

Trước hết, bạn không thể sửa đổi nội dung của các ô bảng được tạo bởi plugin datepicker. Làm như vậy sẽ phá vỡ chức năng cốt lõi của nó khi nó đọc nội dung ô để tạo chuỗi ngày đã chọn. Vì vậy, nội dung phải được thêm bằng cách sử dụng css thuần túy.

Tạo datepicker bạn

$('#DatePicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    minDate: 0, 
    //The calendar is recreated OnSelect for inline calendar 
    onSelect: function (date, dp) { 
     updateDatePickerCells(); 
    }, 
    onChangeMonthYear: function(month, year, dp) { 
     updateDatePickerCells(); 
    }, 
    beforeShow: function(elem, dp) { //This is for non-inline datepicker 
     updateDatePickerCells(); 
    } 
}); 
updateDatePickerCells(); 

Tạo phương pháp để chèn nội dung di động

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /* dynamically create a css rule to add the contents with the :after       
       selector so we don't break the datepicker functionality */ 
      var className = 'datepicker-content-' + value; 

      if(value == 0) 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //  
      else 
       addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}'); 

      $(this).addClass(className); 
     }); 
    }, 0); 
} 

Thêm một phương pháp để tạo các quy tắc CSS mới một cách nhanh chóng, trong khi theo dõi những người đã tạo ra.

var dynamicCSSRules = []; 
function addCSSRule(rule) { 
    if ($.inArray(rule, dynamicCSSRules) == -1) { 
     $('head').append('<style>' + rule + '</style>'); 
     dynamicCSSRules.push(rule); 
    } 
} 

Và cuối cùng, một số css mặc định cho nội dung di động mới

.ui-datepicker td a:after 
{ 
    content: ""; 
    display: block; 
    text-align: center; 
    color: Blue; 
    font-size: small; 
    font-weight: bold; 
} 

này làm việc cho nội dung cơ bản, nhưng nếu bạn muốn nhận được ưa thích với một cái gì đó như '$ 20,95 (chứa các ký tự đặc biệt CSS) , bạn có thể sử dụng hàm băm md5 của nội dung để tạo biến số className.

EDIT JSFiddle sửa đổi từ @ yuga của JSFiddle để bao gồm một hash MD5 của tên lớp duy nhất cho nội dung phức tạp hơn.

Answer 2

Dựa trên câu trả lời của @ PrestonS và this post, tôi có một giải pháp đơn giản mà không cần thêm <style> thẻ vào tiêu đề.

Giải pháp của tôi cập nhật như vậy Preston:

Modified updateDatePickerCells chức năng:

function updateDatePickerCells(dp) { 
    /* Wait until current callstack is finished so the datepicker 
     is fully rendered before attempting to modify contents */ 
    setTimeout(function() { 
     //Fill this with the data you want to insert (I use and AJAX request). Key is day of month 
     //NOTE* watch out for CSS special characters in the value 
     var cellContents = {1: '20', 15: '60', 28: '100'}; 

     //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a) 
     $('.ui-datepicker td > *').each(function (idx, elem) { 
      var value = cellContents[idx + 1] || 0; 

      /***** MAGIC! *****/ 

      $(this).attr('data-content', value); 

      // and that's it! (oh, so easy) 
     }); 
    }, 0); 
} 

Với giải pháp này, bạn không cần addCSSRule chức năng ở tất cả.

css Modified:

/* to target all date cells */ 
.ui-datepicker td > *:after { 
    content: attr(data-content); /***** MAGIC! *****/ 

    /* add your other styles here */ 
} 

/* to target only allowed date cells */ 
.ui-datepicker td > a:after { 
} 

/* to target only disabled date cells */ 
.ui-datepicker td > span:after { 
} 

Khởi tạo với các đối tượng datepicker

Nếu bạn cần các đối tượng datepicker trong updateDatePickerCells chức năng, đây là một cách để có được nó vào thời điểm khởi tạo. (Dựa trên this post)

var calendarElem = $('#DatePicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    minDate: 0, 
    //The calendar is recreated OnSelect for inline calendar 
    onSelect: function (date, dp) { 
     updateDatePickerCells(dp); 
    }, 
    onChangeMonthYear: function(month, year, dp) { 
     updateDatePickerCells(dp); 
    }, 
    beforeShow: function(elem, dp) { //This is for non-inline datepicker 
     updateDatePickerCells(dp); 
    } 
}); 

var datepicker = $.datepicker._getInst(calendarElem[0]); 
updateDatePickerCells(datepicker);