Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Как ограничить выбор дней в форме Tilda

Доставка товара по городу

Доставка товара

Введите телефон, адрес и дату доставки

Как ограничить выбор дней в форме Tilda

Создали блок c формой и добавили поле "Дата" вид разделителя "-"
Настройки блокированных дат на скрине ниже

Вставили код1 или код2 в блок Т123

В коде1 можем прописать число дней запрещённых для выбора, начиная от текущей даты
const daysLimit = 2;

В коде2 можем прописать число дней разрешённых для выбора, начиная от текущей даты
const daysLimit = 15;

И список дат, запрещённых к выбору
const disableDates =
[
'11-02-2025',
'16-02-2025',
];

Библиотека для примера 1

Доступно указанное кол-во дней от текущей даты

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        setTimeout(function() {
            
                const daysLimit = 1; //Количество запрещённых дней от текущей даты
                
                //Список заблокированных дат
                const disableDates = [
                    '11-02-2024',
                    '16-02-2024',
                ];
                
                
                //БЛОКИРОВКА ДНЕЙ ОТ ТЕКУЩЕЙ ДАТЫ 
                //Запрет ввода в поле даты
                const dateInputs = document.querySelectorAll('.t-datepicker');
                for (let dateInput of dateInputs) {
                    dateInput.setAttribute('readonly', 'readonly');
                };
                //Поиск текущей даты
                const currentDate = document.querySelector('.t_datepicker__today');
                //Если дата определена, то определяем даты разблокировки
                if(currentDate!=null){
                    const date = currentDate.getAttribute('data-picker');
                    const blockArr = [];    
                    for(i=1; i<=daysLimit; i++){
                        let dateSplit = date.split('-');
                        const setAttrDate = new Date(dateSplit[0],dateSplit[1]-1,dateSplit[2]);
                        setAttrDate.setDate(setAttrDate.getDate()+i);
                        const blockDate = `${setAttrDate.getFullYear()}-${  Number(setAttrDate.getMonth())+1 }-${setAttrDate.getDate()}`
                        blockArr.push(blockDate);
                    };
                    const divStyle = document.createElement("div");
                    divStyle.className = "date-block-distance-css";
                    let blockCssLine = '';
                    for(i=0; i<=blockArr.length; i++){
                        blockCssLine += `
                            .t_datepicker__day-cell[data-picker="${blockArr[i]}"]{
                                opacity: 0.4;
                                pointer-events: none;
                            }
                        `;
                    };
                    divStyle.innerHTML = `
                        <style>
                            ${blockCssLine}
                        </style>
                    `;
                    document.querySelector('body').append(divStyle);
                };
                
                
                //БЛОКИРОВКА ОПРЕДЕЛЁННЫХ ДАТ
                if(disableDates.length){
                    const blockArr = [];
                    for(i=0; i<disableDates.length; i++){
                        let dateArr = disableDates[i].split('-');
                        let day = dateArr[0];
                        if( day[0]=='0' ) day = day.slice(1);
                        let month = dateArr[1];
                        if( month[0]=='0' ) month = month.slice(1);
                        let year = dateArr[2];
                        dateArr = year+'-'+month+'-'+day;
                        blockArr.push(dateArr);
                    };
                    
                    const divStyle = document.createElement("div");
                    divStyle.className = "date-block-special-css";
                    let blockCssLine = '';
                    for(i=0; i<=blockArr.length; i++){
                        blockCssLine += `
                            .t_datepicker__day-cell[data-picker="${blockArr[i]}"]{
                                opacity: .4;
                                pointer-events: none;
                            }
                        `;
                    };
                    divStyle.innerHTML = `
                        <style>
                            ${blockCssLine}
                        </style>
                    `;
                    document.querySelector('body').append(divStyle);
                };
                
        }, 2000);
    })();    
});    
</script>

<style>
.uc-date-correct{
    display: none;
}

.t_datepicker__today.t_datepicker__day-cell {
    opacity: 1;
    pointer-events: all;
}


</style>

Библиотека для примера 2

Запрещено указанное кол-во дней от текущей даты

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        setTimeout(function() {
            
                const daysLimit = 15; //Количество активных дней от текущей даты
                
                //Список заблокированных дат
                const disableDates = [
                    '11-02-2024',
                    '16-02-2024',
                ];
                
                
                //РАЗБЛОКИРОВКА ДНЕЙ ОТ ТЕКУЩЕЙ ДАТЫ 
                //Запрет ввода в поле даты
                const dateInputs = document.querySelectorAll('.t-datepicker');
                for (let dateInput of dateInputs) {
                    dateInput.setAttribute('readonly', 'readonly');
                };
                //Поиск текущей даты
                const currentDate = document.querySelector('.t_datepicker__today');
                //Если дата определена, то определяем даты разблокировки
                if(currentDate!=null){
                    const date = currentDate.getAttribute('data-picker');
                    const blockArr = [];    
                    for(i=1; i<=daysLimit; i++){
                        let dateSplit = date.split('-');
                        const setAttrDate = new Date(dateSplit[0],dateSplit[1]-1,dateSplit[2]);
                        setAttrDate.setDate(setAttrDate.getDate()+i);
                        const blockDate = `${setAttrDate.getFullYear()}-${  Number(setAttrDate.getMonth())+1 }-${setAttrDate.getDate()}`
                        blockArr.push(blockDate);
                    };
                    const divStyle = document.createElement("div");
                    divStyle.className = "date-block-distance-css";
                    let blockCssLine = '';
                    for(i=0; i<=blockArr.length; i++){
                        blockCssLine += `
                            .t_datepicker__day-cell[data-picker="${blockArr[i]}"]{
                                opacity: 1;
                                pointer-events: all;
                            }
                        `;
                    };
                    divStyle.innerHTML = `
                        <style>
                            ${blockCssLine}
                        </style>
                    `;
                    document.querySelector('body').append(divStyle);
                };
                
                
                //БЛОКИРОВКА ОПРЕДЕЛЁННЫХ ДАТ
                if(disableDates.length){
                    const blockArr = [];
                    for(i=0; i<disableDates.length; i++){
                        let dateArr = disableDates[i].split('-');
                        let day = dateArr[0];
                        if( day[0]=='0' ) day = day.slice(1);
                        let month = dateArr[1];
                        if( month[0]=='0' ) month = month.slice(1);
                        let year = dateArr[2];
                        dateArr = year+'-'+month+'-'+day;
                        blockArr.push(dateArr);
                    };
                    
                    const divStyle = document.createElement("div");
                    divStyle.className = "date-block-special-css";
                    let blockCssLine = '';
                    for(i=0; i<=blockArr.length; i++){
                        blockCssLine += `
                            .t_datepicker__day-cell[data-picker="${blockArr[i]}"]{
                                opacity: .4;
                                pointer-events: none;
                            }
                        `;
                    };
                    divStyle.innerHTML = `
                        <style>
                            ${blockCssLine}
                        </style>
                    `;
                    document.querySelector('body').append(divStyle);
                };
                
        }, 2000);
    })();    
});    
</script>

<style>
.uc-date-correct{
    display: none;
}

.t_datepicker__today.t_datepicker__day-cell {
    opacity: 1;
    pointer-events: all;
}

.t_datepicker__day-cell {
    opacity: .4;
    pointer-events: none;
}

</style>