Unable to select date in calender

Question

I am using multiDatesPicker for calendar which works fine with default calendar options.

In my case I am appending an extra span tag to calendar dates so after appending the span tag, it is not selecting the dates on click.

here is how I am appending the span tag

$(function() {
  $('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d"
  });
  $('.ui-state-default').prepend($('<span>A</span> <span>B</span>'));
});

Demo

Answer 1

You could avoid using prepend($('<span>A</span> <span>B</span>')) . Another thing, why are you using <span> when you can pick multidates without using it.

 $(function() { $('#custom-date-format').multiDatesPicker({ dateFormat: "ymd" }); $('.ui-state-default'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/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> <div id="page"> <div id="demos"> <ul id="demos-list"> <li class="demo"> <div id="custom-date-format" class="box"></div> </li> </ul> </div> </div> 

Answer 2

You have element <a class="ui-state-default">NUMBER</a> where datepicker script gets the value of this tag, ie NUMBER. When you add span elements into a tag, the content becomes invalid number, that's why date selection doesn't work on click. As solution you can play with css for example:

.ui-state-default::before { content: 'AB '; }