在 Jquery UI 日期选择器中与日期一起显示动态价格

debugcn 发表于 Dev

奥力士

在旅游套餐预订网站中，我想在日期旁边显示价格就像这样。这就是我的日历的样子。

这是我尝试过的。

$(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} 等等。

索里亚·达萨纳亚克

试试这个...

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";}'); //&nbsp;
            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">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。