datepicker обернуть в функцию?

211
29 июля 2018, 16:30

Кто то знает почему из функции не могу вызвать air datepicker?

$(document).ready(function () { 
  $('.add-tarif__period-date').on('click', function(e){ 
        var start = $(this).find('.startDate').attr("id"); 
        var end = $(this).find('.endDate').attr("id"); 
        startCalendar(start, end); 
    }); 
     
 
 
    function startCalendar(start, end) { 
        var disabledTarifDates = []; 
 
        var $starttarifDate = start; 
        var $endtarifDate = end; 
 
        $starttarifDate.datepicker({ 
            inline: false, 
            range: true, 
            toggleSelected: true, 
            minDate: new Date(), 
            multipleDatesSeparator: ",", 
            dateFormat: 'dd-mm-yyyy', 
            onSelect: function (fd, date) { 
                if(date){ 
                    var arrDate = fd.split(","); 
                    $starttarifDate.val(arrDate[0]); 
                    $endtarifDate.val(arrDate[1]); 
                    if(arrDate[1]){ 
                        $('.datepicker').css("left", "-100000px"); 
                        $starttarifDate.blur(); 
                    } 
                    $endtarifDate.on('click', function () { 
                        $starttarifDate.datepicker().val(arrDate[0]).data('datepicker').show(); 
                    }); 
 
                    disabledDates.forEach(function () { 
                        console.log(321); 
                        console.log(disabledTarifDates[0]); 
                        console.log($starttarifDate.val()); 
                        console.log($endtarifDate.val()); 
 
                        if(new Date($starttarifDate.val()) < new Date('24-05-2018') && new Date($endtarifDate.val()) > new Date('24-05-2018')){ 
                            console.log(123); 
                        } 
                    }) 
 
                } 
            }, 
            onRenderCell: function(date, cellType) { 
                var formatted = getFormattedDate(date); 
                if (cellType == 'day') { 
                    var returnDay = { 
                        disabled: false 
                    }; 
                    var selectedDate = disabledDates.filter(function(date){ 
                        return date == formatted; 
                    }).length; 
                    if( selectedDate > 0 ){ 
                        returnDay = { 
                            classes: 'add-to-disable-day', 
                            disabled: true 
                        }; 
                    } 
                    return returnDay; 
                } 
            } 
        }); 
    } 
 
    function getFormattedDate(date) { 
        var year = date.getFullYear(), 
            month = date.getMonth() + 1, 
            date = date.getDate(); 
        return year + '-' + month + '-' + date; 
    } 
     
});
.add-tarif__period-date{ 
  width: 400px; 
  margin: 0 auto; 
  display: flex; 
  justify-content: spase-around; 
  margin: 30px; 
} 
.add-tarif__period-date input { 
  margin: 5px; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script> 
 
<div class="add-tarif__period-date"> 
    <div> 
        <input class="startDate" type="text" readonly="" id="startOne"> 
    </div> 
    <div> 
        <input class="endDate" type="text" readonly="" id="endOne"> 
    </div> 
</div> 
<div class="add-tarif__period-date"> 
    <div> 
        <input class="startDate" type="text" readonly="" id="startTwo"> 
    </div> 
    <div> 
        <input class="endDate" type="text" readonly="" id="endTwo"> 
    </div> 
</div>

Answer 1
  1. Вы передаёте в функцию id элементов. Т.е. строки. К строкам datepicker применить не получится. Передавайте элементы (т.е. убирайте в получении параметров attr("id"), или получайте эти элементы внутри функции по id.
  2. Массив у Вас disabledTarifDates, а обращаетесь Вы везде к disabledDates.

Пример кода: https://jsfiddle.net/0uxL39rd/6/

READ ALSO
function getHash()

function getHash()

У меня есть страничка, на которой есть меню, которое отвечает за содержание контента в окне, она реализована через:

246
Отправка сообщения на Е-mail google spreadsheets

Отправка сообщения на Е-mail google spreadsheets

Делаю рассылку оповещения для таблицы, при запуске отправления отсылает очень много одинаковых сообщений на E-mailВозможно кто-то знает в чем...

224
Конфликт Javascript и символа

Конфликт Javascript и символа

Суть таковаНа страницу загружается контент, где присутствует знак ₽

223
Вопросик по appendChild()

Вопросик по appendChild()

Есть переменная:

182