CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Joby Mathews
Joby Mathews

Reputation: 259

Custom text in the side of dates in jquery datepicker

I need to show custom text on some dates at Jquery UI datepicker,ie to show some count for some dates. Example But here in this example the custom text is shown in some dates of all month but my requirement is to attach specific price in titles of such dates and then

in the example the dates and its content are shown by using this format

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

i tried like this but not working

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

I think you all understand my problem any sort of help is appreciable.

Upvotes: 2

Views: 2385

Answers (1)

MatrixTXT
MatrixTXT

Reputation: 2502

Not difficult as you thought, just add a bit more parameter to save month and year.

Changed part

    //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;

Whole working example base on code you provided 

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

Upvotes: 2

Related Questions