jQuery UI MultiDatesPicker demo

Custom date format example

by borayeris

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css">
<div id="mdp-demo"></div>

CSS

.c0 a{background:yellow !important;}
.c1 a{background:red !important;}
.c2 a{background:blue !important;}
.c3 a{background:green !important;}

JavaScript

var borayObj = {};
var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker({
	dateFormat: "yy-mm-dd",
	numberOfMonths: [3,4],
	defaultDate: y+'-1-1',
  onSelect: function(selectedDate){
    var addClass;
    if(selectedDate == '2018-11-09'){
      addClass = 'c1';
    }else if(selectedDate == '2018-11-12'){
      addClass = 'c2';
    }else if(selectedDate == '2018-11-16'){
      addClass = 'c3';
    }else{
      addClass = 'c0';
    }
    
    setTimeout(
      function(){
        //$('.ui-state-active').parent().addClass( addClass );
        borayObj[selectedDate] = addClass;
        $.each( borayObj , function( key, value ){
          dateSplitArr = key.split('-');
          $('[data-year="'+ dateSplitArr[0] +'"][data-month="'+ (dateSplitArr[1]-1) +'"] a').filter(function() {
    return $.trim( $(this).text() ) === Number(dateSplitArr[2]);
}).parent().addClass( value );
        });
      }
      , 1000);
      
    
  	console.log( selectedDate );
  	console.log( borayObj );
  }
  
  
});