Невозможно выбрать дату в календаре

Question

Я использую multiDatesPicker для календаря, который отлично работает с настройками календаря по умолчанию.

В моем случае я добавляю дополнительный тег span к датам календаря, поэтому после добавления тега span он не выбирает даты при нажатии.

вот как я Добавляя тег диапазона

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

Demo

Answer 1

Вы могли бы избежать использования prepend($('<span>A</span> <span>B</span>')). Другое дело, почему вы используете <span>, когда вы можете выбирать многократные, не используя его.

$(function() { 
 
    $('#custom-date-format').multiDatesPicker({ 
 
    dateFormat: "y-m-d" 
 
    }); 
 
    $('.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"> \t \t \t \t \t 
 
     <li class="demo"> 
 
     <div id="custom-date-format" class="box"></div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

У вас есть элемент <a class="ui-state-default">NUMBER</a> где DatePicker сценарий получает значение этого тега, то есть число. Когда вы добавляете элементы span в тег a, содержимое становится недопустимым, поэтому выбор даты не работает при нажатии. Как решение, которое вы можете играть с помощью CSS, например:

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