Как ограничить выбор дней в форме Tilda
Доставка товара по городу
Бесплатно доставим товар Вт-Пт
Доставка товара
Введите телефон, адрес и дату доставки

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

1
Создали блок BF402N
2
Добавили поле Дата
3
Вставили код в блок Другое - Т123
Библиотека для примера

<style>
.pastDay{opacity: 0.2; pointer-events: none;}
.pastDay td:before ,  td.pastDay:before{
    content:'';
    position:absolute;
    display:block;
    width:auto;
    height:auto;
    margin: 0;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0) url(https://static.tildacdn.com/tild3963-6535-4363-b162-636139623966/cross.svg) no-repeat;
    background-size: 50%;
    background-position: center; 
}
</style>
<script>
$(document).ready(function(){
let colDay=1; //Кол-во блокированных дней от текущего
$('input[name="Date"]').attr('readonly','readonly');
let date = new Date();
let attrDate = 0;
Month = date.getMonth()+1;
Year = date.getFullYear();
$("form").on('DOMSubtreeModified', ".t-input-block_inited-date-picker", function() {
    if($('.t_datepicker__today').length){
        $('.t_datepicker__today').addClass('pastDay');//Забкировать текущий день
        attrDate = $('.t_datepicker__today').attr('data-picker');
    };
    //Блокируем заданное кол-во будущих дней
    if(attrDate){
        for (i=1; i<=colDay;i++){
        let arr = attrDate.split('-');
        let setAttrDate = new Date(arr[0],arr[1]-1,arr[2]);
        setAttrDate.setDate(setAttrDate.getDate()+i);
        let findDate = `${setAttrDate.getFullYear()}-${  Number(setAttrDate.getMonth())+1 }-${setAttrDate.getDate()}`
        $('td[data-picker="'+findDate+'"]').addClass('pastDay');
        };
    };
    
    //Блокируем предыдущие дни текущей недели
    $('.t_datepicker__today').prevAll('tbody tr>td').addClass('pastDay');
    //Блокируем предыдущие дни прошедших недель в этом месяце
    $('.t_datepicker__today').parent('tr').prevAll('tr').find('td').addClass('pastDay');
    //Блокируем предыдущие месяцы
    let picM=0;let picD=0;
    if( $('select.t_datepicker__select_month').length ) {
        picM = $('select.t_datepicker__select_month')[0].selectedIndex+1;    
        picD = +$('select.t_datepicker__select_year option:selected').val();
    };

    if (picM<Month && picD<=Year || picD<Year ){
        $('.t_datepicker__body tr').addClass('pastDay');
    };
  });
});
</script>

<style>
/*Блокируем день недели по порядковому номеру от 1 до 7*/
/*Например - среда будет (3)*/
.t_datepicker__body tr > td:nth-child(4) {background: #e2e2e2; pointer-events: none;}
.t_datepicker__body tr > td::nth-child(4):before{display: none !important}
</style>

<style>
/*Блокировка по дате*/
td[data-picker="2022-4-27"]{background: #e2e2e2; pointer-events: none;}
td[data-picker="2022-4-27"]:before {display: none !important;}
</style>
Made on
Tilda