Показать динамическую цену рядом с датой в Jquery UI datepicker

Question

На сайте бронирования турпакетов я хочу показать цену вместе с датой Just Like This .Вот как выглядит мой календарь.

Это то, что я пробовал.

$(function() {
  var dayrates = [100, 150, 200, 250, 300, 350, 400];

  $("#datepicker").datepicker({
    minDate: 0,
    beforeShowDay: function(date) {
        showButtonPanel: false;
        minDate: 0;
      var selectable = true;
      var classname = "";
      var title = "Rs" + dayrates[date.getDay()];


      return [selectable, classname, title];

    },
    dateFormat:"dd-mm-yy"
  });
});

Есть ли в любом случае, чтобы показать разные цены на каждый день.Я могу получить массив, содержащий дату в формате Ymd и цены.просто как

var dates = {2018-12-11:Rs.5999,2018-12-12:Rs6999,2018-12-13:Rs.3999} и т. д.

Answer 1

Попробуйте это ...

var dates = {}
dates[new Date('12/13/2019')]='Rs.500';
dates[new Date('12/14/2019')]='Rs309';
dates[new Date('01/25/2020')]='Rs200';

$('#DatePicker').datepicker({
    showButtonPanel: false,
    minDate: 0,
    beforeShowDay: function(date) {

      var hlText = dates[date]; 
      var date2 = new Date(date);
      var tglAja = date2.getDate();
        if (hlText) {
             updateDatePickerCells(tglAja,hlText);
            return [true, "", hlText];
        }
        else {
            return [true, '', ''];
        }
	},
    
    
    
});
function updateDatePickerCells(a,b) {

    var num = parseInt(a);

    setTimeout(function () {

        $('.ui-datepicker td > *').each(function (idx, elem) {

            if((idx+1)==num){
                value=b;   
            }else{
                 value=0;   
            }
    
            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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.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"/>

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

Answer 2

Думаю, это вам поможет

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

(function($) {
  $("#datepicker").datepicker();
  $("#datepicker").focus(function() {

    $(".ui-datepicker-calendar .ui-state-default").each(function() {

      //add custome text to date cell

      $(this).html($(this).html() + "<br> Rs 500");

    });
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">


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