<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>
<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>`
let count = `<div class="main-quant-wrap t-text">
<div class="quant-prod">Количество</div>
<div class="prod__quantity" style="border-radius:5px;">
<div class="prod__quantity__minus-wrapper">
<span class="prod__quantity__minus"></span>
</div>
<input class="prod__quantity-input t-descr t-descr_xxs" type="number" min="1" max="9999" step="1" value="1" size="4" maxlength="4">
<div class="prod__quantity__plus-wrapper">
<span class="prod__quantity__plus"></span>
</div>
</div>
</div>`;
function startDate(){
$('.t-store__prod-popup__info .date-wrapper').remove();
$('.t-store__prod-popup__price-wrapper').after(dtPcr);
$('.main-quant-wrap').remove();
$('.t-store__prod-popup__btn-wrapper').before(count);
$('.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('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);
});
function repriceQuant(em){
let num = +em.closest('.t-store__prod-popup__info').find('input.prod__quantity-input').val();
let days = +em.closest('.t-store__prod-popup__info').find('span.term').text().replace(/[^+\d]/g, '');
let price = +em.closest('.t-store__prod-popup__info').find('.t-store__prod-popup__price-value').attr('data-product-price-def');
em.closest('.t-store__prod-popup__info').find('.t-store__prod__quantity-input').val(days*num);
em.closest('.t-store__prod-popup__info').find('.date-wrapper .summ').text(price*days*num);
};
$(document).on('click','.prod__quantity__plus',function(e){
let num = +$('input.prod__quantity-input').val();
num++;
$('input.prod__quantity-input').val(num);
repriceQuant( $(this) );
});
$(document).on('click','.prod__quantity__minus',function(e){
let num = +$('input.prod__quantity-input').val();
if(num>1){
num--;
$('input.prod__quantity-input').val(num);
repriceQuant($(this));
};
});
$(document).on('focusout','input.prod__quantity-input',function(e){
repriceQuant($(this));
});
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() );
});
let num = +$('input.prod__quantity-input').val();
dElems.closest('.t-store__prod-popup__info').find('.t-store__prod__quantity-input').val(days*num);
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*num);
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);
};
};
});
</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;
}
.prod__quantity {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
vertical-align: top;
margin: 0 4px 8px 0;
border: 1px solid #777;
font-size: 14px;
height: 45px;
background-color: #fff;
box-sizing: border-box;
margin-top: 6px;
}
.prod__quantity__minus-wrapper {
min-width: 25px;
width: 25px;
height: 25px;
margin: 0 5px;
cursor: pointer;
}
span.prod__quantity__minus {display: inline-block;background: linear-gradient(#777,#777),#fff;width: 100%;height: 100%;background-position: center;background-size: 50% 1px,1px 50%;background-repeat: no-repeat;border-radius: 50px;}
input.prod__quantity-input {
text-align: center;
width: 30px;
height: 30px;
padding: 0;
vertical-align: top;
border: none;
background-color: transparent;
color: #000;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.prod__quantity__plus-wrapper {
min-width: 25px;
width: 25px;
height: 25px;
margin: 0 5px;
cursor: pointer;
}
span.prod__quantity__plus {
display: inline-block;
background: linear-gradient(#777,#777),linear-gradient(#777,#777),#fff;
width: 100%;
height: 100%;
background-position: center;
background-size: 50% 1px,1px 50%;
background-repeat: no-repeat;
border-radius: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.main-quant-wrap {
margin-top: 10px;
}
::-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>
Html code will be here
