jquery datepicker中日期旁边的自定义文本

Question

我需要在 Jquery UI datepicker 的某些日期显示自定义文本，即显示某些日期的一些计数。 Example 但在此示例中，自定义文本显示在整个月份的某些日期，但我的要求是在此类日期的标题中附加特定价格，然后

在示例中，日期及其内容使用这种格式显示

var cellContents = {1: '20', 15: '60', 28: '$99.99'};

我试过这样但没有用

var cellContents = {"2018-06-12": "$300", "2018-06-26": "$63", "2018-07-26": "$63", "2018-07-15": "$63", "2018-08-16": "$63"};

我想你们都理解我的问题，任何形式的帮助都是可观的。

Answer 1

没有你想的那么难，只是多加一点参数来保存月份和年份。

更改部分

    //Get the month and year for checking.
    var selected_month = parseInt($('.ui-datepicker-month').val()) + 1;
    var selected_year = $('.ui-datepicker-year').val();
    //Select disabled days (span) for proper indexing but // apply the rule only to enabled days(a)
    $('.ui-datepicker td > *').each(function(idx, elem) {
      //Specific the target key by adding back the month and year.
      var key = ('0' + (idx + 1)).slice(-2) + '-' + ('0' + selected_month).slice(-2) + '-' + selected_year
      var value = cellContents[key] || 0;

整个工作示例基于您提供的代码

$('#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();

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 = {
      '01-08-2018': '20',
      '15-08-2018': '60',
      '28-08-2018': '$99.99'
    };
    //Get the month and year for checking.
    var selected_month = parseInt($('.ui-datepicker-month').val()) + 1;
    var selected_year = $('.ui-datepicker-year').val();
    //Select disabled days (span) for proper indexing but // apply the rule only to enabled days(a)
    $('.ui-datepicker td > *').each(function(idx, elem) {
      //Specific the target key by adding back the month and year.
      var key = ('0' + (idx + 1)).slice(-2) + '-' + ('0' + selected_month).slice(-2) + '-' + selected_year
      var value = cellContents[key] || 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-' + CryptoJS.MD5(value).toString();

      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);
}
var dynamicCSSRules = [];

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/md5.js"></script>

<link href="https://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<input type="text" id="DatePicker">