Как изменять доступную дату по параметрам выбора опций в форме CR32N в Тильда
Закажи перевод онлайн
От профи без словаря
Рассчет стоимости перевода
Языковая пара
Направление
Выберите кол-во страниц
1
100
Введите желаемую дату получения заказа
Дата получения:
Цена: 0

Как изменять доступную дату по параметрам выбора опций в форме CR32N в Тильда

1
Создали CR32N c формой
2
В форме создали поля с именами и значениями
Выпадающий список - language
Выпадающий список - napr
Количество - number
Дата - finishdate
Калькулятор - price - формула number*napr*language
3
Добавили блок ST200
- Удалили картинку
- Задали название - Заказ перевода
- Задали цену 1р
- Создали 3 параметра со значениями
Языковая пара - 1
Направление - 1
Кол-во страниц - 1
4
Добавили код в блок Другое - Т123
В коде прописали ID ST200
let st200ID = '#rec275029557';
Библиотека для примера
<style>
.pastDay , .blk-btn{
    opacity: 0.1; 
    pointer-events: none;
}
div[data-record-type="744"]{display:none }
</style>

<!--Дата -->
<div class="t-product__option js-product-option dateoption">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Дата получения:</div>
    <div class="t-product__option-variants">
      <select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="Дата получения:" data-product-variant-price="">0</option>
      </select>
  </div>
</div>

<script>
$(document).ready(function(){
let numPage=6;//Кол-во страниц
let numDay=1;
let dateInput = $('input[name="finishdate"]');
dateInput.attr('readonly','readonly');
let formBtn = dateInput.closest('.t-form__inputsbox').find('.t-submit');
formBtn.addClass('blk-btn').attr('type','button');
let elTitleDate = $('input[name="price"]').closest('.t-input-group').find('.t-input-title');
let textCalcTitle = elTitleDate.text();
let date = new Date();
let attrDate = 0;
Month = date.getMonth()+1;
Year = date.getFullYear();
//При измении кол-ва страниц
$('input[name="number"]').change(function() {
    dateInput.val(''); elTitleDate.text(textCalcTitle);
    let totalpage = Math.ceil(Number($(this).val())/numPage);
    numDay = totalpage; formBtn.addClass('blk-btn');
});
//При выборе даты
$(document).on('click','.t712 .date-picker',function(e){ 
   elTitleDate.text(textCalcTitle+' '+dateInput.val());
   if (dateInput.val()){ formBtn.removeClass('blk-btn') }else{ formBtn.addClass('blk-btn') };
});
//При открытии календаря
$('.t712 form').on('DOMSubtreeModified', ".t-input-block_inited-date-picker", function() {
    if($('.cal-month .today').length){
        $('.cal-month .today').addClass('pastDay');//Заблокировать текущий день
        attrDate = $('.today').attr('data-picker');
    };
    if(attrDate){
        for (i=1; i<=numDay;i++){
        let setAttrDate = new Date();
        //let setAttrDate = new Date( attrDate.replace(/,/g, '.'));
        setAttrDate.setDate(setAttrDate.getDate()+i);
        let findDate = `${setAttrDate.getFullYear()}-${  Number(setAttrDate.getMonth())+1 }-${setAttrDate.getDate()}`
        $('.cal-month td[data-picker="'+findDate+'"]').addClass('pastDay');
        };
    };
    $('.today').prevAll('tbody tr>td').addClass('pastDay');
    $('.today').parent('tr').prevAll('tr').addClass('pastDay');
    let picM = $('select.dp-select-month option:selected').val();
    let picD = $('select.dp-select-year option:selected').val();
    if (picM<Month && picD<=Year || picD<Year ){$('.cal-month tr').addClass('pastDay')};
    let numDayShow = $('.cal-month td').length;
    let numCurDay = $('.cal-month td.today').index('.cal-month td')+1;
    if ( (numDayShow-numCurDay) <= numDay ){  $('.dp-next').click()};

});

let st200ID = '#rec275029557';
let notLazyblock = '.t744 .t-slds__bgimg';
for(let i = 0; i < $(notLazyblock).length; i++){
$(notLazyblock).addClass('loaded plus');
$(notLazyblock+':eq('+i+')').css('background-image', 'url("'+$(notLazyblock+':eq('+i+')').data("original")+'")' );
};
$(st200ID+" .t744 .t-product__option:eq(2)").after($(".dateoption"));  
$('.t712 .t-submit').click(function() {
  $(st200ID+' .t744__price-value').html(  $('input[name="price"]').val() );
  $(st200ID+' .t744 select:eq(0) option:selected').val( $('select[name="language"]').val() );
  $(st200ID+' .t744 select:eq(1) option:selected').val( $('select[name="napr"]').val() );
  $(st200ID+' .t744 select:eq(2) option:selected').val( $('input[name="number"]').val()+' шт' );
  $(st200ID+' .t744 select:eq(3) option:selected').val( $('input[name="finishdate"]').val() );
  setTimeout(function() {$(st200ID+" .t744__btn").click(); }, 100);
}); 
 
});
</script>
Библиотека стилей CR32N для этого примера
<style>
.t712 .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.t712 .t-input-group { width: 100%}
.t712 .t-input-group.t-input-group_sb { width: 48%}
.t712 .t-select {
    width: 100%;
    height: 50px;
    padding: 0 33px 0 10px;
    font-size: 14px;
}
.t712 .t-input-subtitle , .t712 .t-input-title {height: auto}
.t712__formwrapper {box-shadow: 0 0 0px 1px #fff}
@media screen and (max-width:540px){
.t712 .t-form__inputsbox {display: block}   
.t712 .t-input-group.t-input-group_sb { width: 100%}
}
</style>
Заказ перевода
1
р.
Языковая пара
Направление
Кол-во страниц
Click to order
Total: 
Введите почтовый адрес
Payment method
Дата получения:
Made on
Tilda