Made on
Tilda
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$.datepicker._get_original=$.datepicker._get,$.datepicker._get=function(t,e){var i=$.datepicker._get_original(t,e),a=t.settings.range;if(!a)return i;var s=this;switch(a){case"period":case"multiple":var n=$(this.dpDiv).data("datepickerExtensionRange");switch(n||(n=new _datepickerExtension,$(this.dpDiv).data("datepickerExtensionRange",n)),n.range=a,n.range_multiple_max=t.settings.range_multiple_max||0,e){case"onSelect":var r=i;r||(r=function(){}),i=function(t,e){n.onSelect(t,e),r(t,e,n),s._datepickerShowing=!1,setTimeout(function(){s._updateDatepicker(e),s._datepickerShowing=!0}),n.setClassActive(e)};break;case"beforeShowDay":var r=i;r||(r=function(){return[!0,""]}),i=function(t){var e=r(t);return e=n.fillDay(t,e)};break;case"beforeShow":var r=i;r||(r=function(){}),i=function(t,e){r(t,e),n.setClassActive(e)};break;case"onChangeMonthYear":var r=i;r||(r=function(){}),i=function(t,e,i){r(t,e,i),n.setClassActive(i)}}}return i},$.datepicker._setDate_original=$.datepicker._setDate,$.datepicker._setDate=function(t,e,i){var a=t.settings.range;if(!a)return $.datepicker._setDate_original(t,e,i);var s=this.dpDiv.data("datepickerExtensionRange");if(!s)return $.datepicker._setDate_original(t,e,i);switch(a){case"period":("object"!=typeof e||void 0==e.length)&&(e=[e,e]),s.step=0,$.datepicker._setDate_original(t,e[0],i),s.startDate=this._getDate(t),s.startDateText=this._formatDate(t),$.datepicker._setDate_original(t,e[1],i),s.endDate=this._getDate(t),s.endDateText=this._formatDate(t),s.setClassActive(t);break;case"multiple":("object"!=typeof e||void 0==e.length)&&(e=[e]),s.dates=[],s.datesText=[];var n=this;$.map(e,function(e){$.datepicker._setDate_original(t,e,i),s.dates.push(n._getDate(t)),s.datesText.push(n._formatDate(t))}),s.setClassActive(t)}};var _datepickerExtension=function(){this.range=!1,this.range_multiple_max=0,this.step=0,this.dates=[],this.datesText=[],this.startDate=null,this.endDate=null,this.startDateText="",this.endDateText="",this.onSelect=function(t,e){switch(this.range){case"period":return this.onSelectPeriod(t,e);case"multiple":return this.onSelectMultiple(t,e)}},this.onSelectPeriod=function(t,e){this.step++,this.step%=2,this.step?(this.startDate=this.getSelectedDate(e),this.endDate=this.startDate,this.startDateText=t,this.endDateText=this.startDateText):(this.endDate=this.getSelectedDate(e),this.endDateText=t,this.startDate.getTime()>this.endDate.getTime()&&(this.endDate=this.startDate,this.startDate=this.getSelectedDate(e),this.endDateText=this.startDateText,this.startDateText=t))},this.onSelectMultiple=function(t,e){var i=this.getSelectedDate(e),a=-1;$.map(this.dates,function(t,e){t.getTime()==i.getTime()&&(a=e)});var s=$.inArray(t,this.datesText);-1!=a?this.dates.splice(a,1):this.dates.push(i),-1!=s?this.datesText.splice(s,1):this.datesText.push(t),this.range_multiple_max&&this.dates.length>this.range_multiple_max&&(this.dates.splice(0,1),this.datesText.splice(0,1))},this.fillDay=function(t,e){var i=e[1];switch(1==t.getDate()&&(i+=" first-of-month"),t.getDate()==new Date(t.getFullYear(),t.getMonth()+1,0).getDate()&&(i+=" last-of-month"),e[1]=i.trim(),this.range){case"period":return this.fillDayPeriod(t,e);case"multiple":return this.fillDayMultiple(t,e)}},this.fillDayPeriod=function(t,e){if(!this.startDate||!this.endDate)return e;var i=e[1];return t>=this.startDate&&t<=this.endDate&&(i+=" selected"),t.getTime()==this.startDate.getTime()&&(i+=" selected-start"),t.getTime()==this.endDate.getTime()&&(i+=" selected-end"),e[1]=i.trim(),e},this.fillDayMultiple=function(t,e){var i=e[1],a=!1;return $.map(this.dates,function(e){e.getTime()==t.getTime()&&(a=!0)}),a&&(i+=" selected selected-start selected-end"),e[1]=i.trim(),e},this.getSelectedDate=function(t){return new Date(t.selectedYear,t.selectedMonth,t.selectedDay)},this.setClassActive=function(t){var e=this;setTimeout(function(){$("td.selected > *",t.dpDiv).addClass("ui-state-active"),"multiple"==e.range&&$("td:not(.selected)",t.dpDiv).removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active")})}};
</script>
<script>
/* Локализация datepicker */
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: 'Предыдущий',
nextText: 'Следующий',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
weekHeader: 'Не',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
</script>
<style>
.ui-datepicker-trigger {
margin-left: 5px;
position: relative;
top: 3px;
cursor: pointer;
}
.date-wrapper {
display: flex;
margin-top: 12px;
flex-wrap: wrap;
}
.date-block {
margin-right: 15px;
}
.date-lbl {
margin-bottom: 6px;
font-size: 12px;
}
.hasDatepicker {
width: 180px;
padding-left: 10px;
height: 25px;
border: 1px solid #afafaf;
border-radius: 5px;
}
img.ui-datepicker-trigger {
margin-left: -22px;
}
.js-store-product .date-wrapper {
display: flex !important;
}
.date-title {
width: 100%;
margin-bottom: 10px;
}
div#ui-datepicker-div {
z-index: 99999999 !important;
}
.date-block span:after {
content: "";
background-image: url(https://static.tildacdn.com/tild3539-3766-4237-b032-663836326132/weekly-calendar-outl.svg);
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
display: block;
position: absolute;
right: 5px;
top: 0;
pointer-events: none;
}
.date-summ {
font-weight: 600;
margin-bottom: 5px;
}
.date-block span {
position: relative;
}
.shprice{
display:block !important;
}
.js-product-edition-option[data-edition-option-id="Даты аренды"],
.t-store__prod__quantity{
display: none;
}
/*.t706__product-title__option>div {*/
/* display: none;*/
/*}*/
.t-store__prod-popup__btn {
opacity: 0.3;
pointer-events: none;
}
.act-btn-mode .t-store__prod-popup__btn {
opacity: 1;
/*pointer-events: auto;*/
}
.t-store__prod-popup__btn-wrapper {
pointer-events: none;
}
.act-btn-mode .t-store__prod-popup__btn-wrapper {
pointer-events: auto;
cursor: pointer;
width: fit-content;
}
.date-summ.shprice.visi{
visibility: hidden;
}
.date-wrapper .term.red-mode{
color: #ff0000;
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #d8d8d8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #d8d8d8;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #d8d8d8;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #d8d8d8;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #d8d8d8;
}
::placeholder { /* Most modern browsers support this now. */
color: #d8d8d8;
}
</style>
<script>
$( document ).ready(function() {
let dtPcr = `<div style="display:none" class="date-wrapper t-descr">
<div class="date-summ" style="display:none"><span>Сумма аренды: </span><span class="summ"></span> ₽</div>
<div class="date-title"><span>Срок аренды: </span><span class="term">1 день</span></div>
<div class="date-block">
<div class="date-lbl">Укажите дату начала аренды</div>
<span><input readonly="readonly" type="text" placeholder="27.06.2023 - 30.06.2023" id="datepicker-start"></span>
</div>
</div>`
function startDate(){
$('.t-store__prod-popup__info .date-wrapper').remove();
$('.t-store__prod-popup__price-wrapper').after(dtPcr);
$('.ui-state-default').removeClass('ui-state-active');
let date1 = new Date();
date1.setDate(date1.getDate() + 1);
$('#datepicker-start').attr('placeholder', date1.toLocaleDateString() );
$(function(){
$('#datepicker-start').datepicker({
minDate: date1,
range:'period', // 'period' or 'multiple'
onSelect:function(dateText, inst, extensionRange){
//range - new argument!
switch(inst.settings.range){
case 'period':
if(extensionRange.startDateText==extensionRange.endDateText){
$('.date-lbl').text('Укажите дату завершения аренды');
$('#datepicker-start').val(extensionRange.startDateText+' - ');
//sDate(extensionRange.startDateText,extensionRange.endDateText);
}else{
$('.date-lbl').text('Укажите дату начала аренды');
$('#datepicker-start').val(extensionRange.startDateText+' - '+extensionRange.endDateText);
sDate(extensionRange.startDateText,extensionRange.endDateText);
};
break;
case 'multiple':
break;
}
}
});
});
$('.ui-datepicker').addClass('notranslate');
$( "#datepicker-start" ).datepicker( "setDate", "" );
};
//При открытии карточки товара
$(document).on('click','a[href*="/tproduct/"]',function(e){
$('.act-btn-mode').removeClass('act-btn-mode');
$('#datepicker-start').datepicker("destroy");
startDate();
$('.ui-state-default').removeClass('ui-state-active');
});
//При отправки товара в корзину
$(document).on('click','.start-order',function(e){
let wrapper = $(this);
$('.start-order').removeClass('start-order');
let parent = wrapper.closest('.t-store__prod-popup__info');
let arenda = parent.find('.js-product-edition-option[data-edition-option-id="Даты аренды"]');
if(arenda.length>0){
let date = parent.find('#datepicker-start').val();
// arenda.find('.t-product__option-item_active input').val(date);
// arenda.find('.t-product__option-item_active span').text(date);
arenda.find('select option:selected').val(date)
arenda.find('select option:selected').text(date)
};
setTimeout(function () {
wrapper.find('.t-btn').click();
$('.ui-state-default').removeClass('ui-state-active');
}, 300);
});
setTimeout(function () {
if ( $('.t-store__product-snippet').length ) startDate();
}, 500);
function sDate(st,en){
let start = st;
let end = en;
if( start!='' && end!=''){
let arr1 = start.split('.');
let arr2 = end.split('.');
let novdt1 = arr1[1]+"/"+arr1[0]+"/"+arr1[2];
let novdt2 = arr2[1]+"/"+arr2[0]+"/"+arr2[2];
let datestart = new Date(novdt1);
let dateend = new Date(novdt2);
//Вычисляем разницу между датами
let days = (dateend-datestart)/86400000+1;
if(days>0) {
$('#datepicker-start').datepicker("hide");
$('#datepicker-start').closest('.t-store__prod-popup__info').addClass('act-btn-mode');
}else{
$('.t-store__prod-popup__info').removeClass('act-btn-mode');
};
let dElems = $('#datepicker-start');
let wrd = 'день';
let plp = days.toString();
let ltrStr = +plp.substring( plp.length , plp.length - 1);
if (days==2 || days==3 || days==4 ) wrd = 'дня';
if (days>=5) wrd = 'дней';
if (days>=21 && ltrStr==1 ) wrd = 'день';
if (days>=21 && (ltrStr==2 || ltrStr==3 || ltrStr==4 ) ) wrd = 'дня';
$('.date-wrapper .term').text(days+' '+wrd);
let arr = [];
dElems.closest('.t-store__prod-popup__info').find('.js-product-edition-option[data-edition-option-id="Даты аренды"] .t-product__option-input').each(function(index){
let mn = +$(this).val();
if(days<mn){
$(this).closest('.t-product__option-variants').find('label:eq('+(index-1)+')').click();
return false;
}else{
if(index==3){
$(this).closest('.t-product__option-variants').find('label:last').click();
};
};
arr.push( $(this).val() );
});
if(days<=14){
$('.date-summ.shprice').removeClass('visi');
$('.date-wrapper .term').removeClass('red-mode');
dElems.closest('.t-store__prod-popup__info').find('.t-store__prod__quantity-input').val(days);
setTimeout(function () {
let price = +dElems.closest('.t-store__prod-popup__info').find('.t-store__prod-popup__price-value').attr('data-product-price-def');
//dElems.closest('.t-store__prod-popup__info').find('.date-wrapper .summ').text(price*days);
dElems.closest('.t-store__prod-popup__info').find('.date-wrapper .summ').text(price);
dElems.closest('.t-store__prod-popup__info').find('.date-summ').addClass('shprice');
dElems.closest('.t-store__prod-popup__info').find('.t-store__prod-popup__btn-wrapper').addClass('start-order');
}, 500);
}else{
$('.t-store__prod-popup__info').removeClass('act-btn-mode');
$('.date-summ.shprice').addClass('visi');
$('.date-wrapper .term').text(' максимум 14 дней').addClass('red-mode');
};
};
};
});
</script>