<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<script>
$( document ).ready(function() {
$(function(){
var handle = $("#custom-handle");
$("#slider").slider({
range: 'min',
min: 1,
max: 31,
value: 1,
//Выводим кол-во дней в ползунок
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text( ui.value );
//Выводим кол-во дней в поле дней
$('input[name="days"]').val(ui.value);
//********************
//Меняем календарь
let start = $('input.t-input[name="datestart"]').val().split('/');
let end = $('input.t-input[name="dateend"]').val().split('/');
let st = $('input.t-input[name="datestart"]').val();
if( st=='' || st=='__/__/____' ){
let Data = new Date(),
TwoDay = new Date();
TwoDay.setDate(Data.getDate()+1);
let Month = Data.getMonth();
let Day = Data.getDate();
let Year = Data.getFullYear();
Month2 = TwoDay.getMonth();
Day2 = TwoDay.getDate();
Year2 = TwoDay.getFullYear();
//Добавить 0
let zMonth = ("0" + (Month+1)).slice(-2);
let zDate = ("0" + (Day)).slice(-2);
let zMonth2 = ("0" + (Month2+1)).slice(-2);
let zDate2 = ("0" + (Day2)).slice(-2);
$('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
$('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);
};
$('.calc-btn').removeClass('block-btn');
let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
let FwoDay = new Date(date1);
FwoDay.setDate(date1.getDate()+ui.value);
let Month3 = FwoDay.getMonth();
let Day3 = FwoDay.getDate();
let Year3 = FwoDay.getFullYear();
//Добавить 0
let zMonth3 = ("0" + (Month3+1)).slice(-2);
let zDate3 = ("0" + (Day3)).slice(-2);
//Выводим крнечную дату +1
$('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
//********************
getPrice();
}
});
});
//Функция разрядности
function divideNumberByPieces(x, delimiter) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
//Считаем прайс
function getPrice(){
//Получаем данные
let price = +$('.car-price .tn-atom').text().replace(/[^+\d]/g, '');//Цена за сутки
let step = +$('.step .tn-atom').text().replace(/[^+\d]/g, '');//Шаг
let days = +$('input[name="days"]').val();//Дни
//Опции
let opt1 = 0, opt2 = 0, opt3 = 0, opt4 = 0, opt5 = 0;
//Формируем цену опций
if($('.switcher1').hasClass('switcheron')) opt1=130;
if($('.switcher2').hasClass('switcheron')) opt2=130;
if($('.switcher3').hasClass('switcheron')) opt3=130;
if($('.switcher4').hasClass('switcheron')) opt4=350;
if($('.switcher5').hasClass('switcheron')) opt5=550;
//Проверка на лимит 2500 руб для опций Детское кресло, Регистратор , Спутниковая навигационная система GPS
opt1 = opt1*days;
opt2 = opt2*days;
opt3 = opt3*days;
opt4 = opt4*days;
opt5 = opt5*days;
if( opt1>2500 ) opt1 = 2500;
if( opt2>2500 ) opt2 = 2500;
if( opt3>2500 ) opt3 = 2500;
let summOpt = opt1+opt2+opt3+opt4+opt5;
// Итоги
let stPrice = price - step*(days-1);
let itog = stPrice * days + summOpt;
//Выводим итоги в блок
$('.day-price .tn-atom').html( divideNumberByPieces(stPrice)+' руб/сутки' );
$('.summ-price .tn-atom').html(divideNumberByPieces(itog)+' руб' );
//Сохраняем в LS
localStorage.setItem('startDate', $('input.t-input[name="datestart"]').val() ); //старт
localStorage.setItem('finishDate', $('input.t-input[name="dateend"]').val() ); //окончание
localStorage.setItem('countDays', $('input[name="days"]').val() ); //дни
};
//Вычисляем разницу между датами
function btweenDate(){
let start = $('input.t-input[name="datestart"]').val().split('/');
let end = $('input.t-input[name="dateend"]').val().split('/');
let st = $('input.t-input[name="datestart"]').val();
if( st=='' || st=='__/__/____' ){
let Data = new Date(),
TwoDay = new Date();
TwoDay.setDate(Data.getDate()+1);
let Month = Data.getMonth();
let Day = Data.getDate();
let Year = Data.getFullYear();
Month2 = TwoDay.getMonth();
Day2 = TwoDay.getDate();
Year2 = TwoDay.getFullYear();
//Добавить 0
let zMonth = ("0" + (Month+1)).slice(-2);
let zDate = ("0" + (Day)).slice(-2);
let zMonth2 = ("0" + (Month2+1)).slice(-2);
let zDate2 = ("0" + (Day2)).slice(-2);
$('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
$('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);
};
$('.calc-btn').removeClass('block-btn');
let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
let date2 = new Date(end[1]+'/'+end[0]+'/'+end[2]);
let milli_secs = date2.getTime() - date1.getTime();
let days = milli_secs / (1000 * 3600 * 24);
//Если дней меньше 1
if(days<1){
days = 1;
let FwoDay = new Date(date1);
FwoDay.setDate(date1.getDate()+1);
let Month3 = FwoDay.getMonth();
let Day3 = FwoDay.getDate();
let Year3 = FwoDay.getFullYear();
//Добавить 0
let zMonth3 = ("0" + (Month3+1)).slice(-2);
let zDate3 = ("0" + (Day3)).slice(-2);
//Выводим крнечную дату +1
$('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
};
//Если дней больше 31
if(days>31){
days = 31;
let FwoDay2 = new Date(date1);
FwoDay2.setDate(date1.getDate()+31);
let Month4 = FwoDay2.getMonth();
let Day4 = FwoDay2.getDate();
let Year4 = FwoDay2.getFullYear();
//Добавить 0
let zMonth4 = ("0" + (Month4+1)).slice(-2);
let zDate4 = ("0" + (Day4)).slice(-2);
//Выводим крнечную дату +1
$('input.t-input[name="dateend"]').val(zDate4+'/'+zMonth4+'/'+Year4);
};
$('input[name="days"]').val(days);
$('input[name="days"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
};
//При потере фокуса в поле даты
$('.uc-calc-car').on('blur input click', '.t-datepicker, .t_datepicker__day-cell', function(){
setTimeout(function(){
btweenDate();
}, 500);
});
//При вводе в поле дней
$('.uc-calc-car').on('input', 'input[name="days"]', function(){
let days = +$(this).val();
if(days<=1){
$(this).val(1);
days=1;
};
if(days>=31){
$(this).val(31);
days=31;
};
$("#slider").slider("value", days);
$('#custom-handle').text(days);
//********************
//Меняем календарь
let start = $('input.t-input[name="datestart"]').val().split('/');
let end = $('input.t-input[name="dateend"]').val().split('/');
let st = $('input.t-input[name="datestart"]').val();
if( st=='' || st=='__/__/____' ){
let Data = new Date(),
TwoDay = new Date();
TwoDay.setDate(Data.getDate()+1);
let Month = Data.getMonth();
let Day = Data.getDate();
let Year = Data.getFullYear();
Month2 = TwoDay.getMonth();
Day2 = TwoDay.getDate();
Year2 = TwoDay.getFullYear();
//Добавить 0
let zMonth = ("0" + (Month+1)).slice(-2);
let zDate = ("0" + (Day)).slice(-2);
let zMonth2 = ("0" + (Month2+1)).slice(-2);
let zDate2 = ("0" + (Day2)).slice(-2);
$('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
$('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);
};
$('.calc-btn').removeClass('block-btn');
let date1 = new Date(start[1]+'/'+start[0]+'/'+start[2]);
let FwoDay = new Date(date1);
FwoDay.setDate(date1.getDate()+days);
let Month3 = FwoDay.getMonth();
let Day3 = FwoDay.getDate();
let Year3 = FwoDay.getFullYear();
//Добавить 0
let zMonth3 = ("0" + (Month3+1)).slice(-2);
let zDate3 = ("0" + (Day3)).slice(-2);
//Выводим крнечную дату +1
$('input.t-input[name="dateend"]').val(zDate3+'/'+zMonth3+'/'+Year3);
//********************
getPrice();
});
//При загрузке страницы
setTimeout(function(){
$('input.t-input[name="days"]').attr('type','number').val(1);//переводим поле дней в цифровое
$('input.t-input[name="datestart"]').attr('autocomplete','off'); //отключаем датам автозаполнение
$('input.t-input[name="dateend"]').attr('autocomplete','off'); //отключаем датам автозаполнение
//Если в хранилище есть даты, то выгружаем их, иначе ставим текущие
if ( localStorage.getItem('countDays') == null) {
//Выставляем дату
let Data = new Date(),
TwoDay = new Date();
TwoDay.setDate(Data.getDate()+1);
let Month = Data.getMonth();
let Day = Data.getDate();
let Year = Data.getFullYear();
Month2 = TwoDay.getMonth();
Day2 = TwoDay.getDate();
Year2 = TwoDay.getFullYear();
//Добавить 0
let zMonth = ("0" + (Month+1)).slice(-2);
let zDate = ("0" + (Day)).slice(-2);
let zMonth2 = ("0" + (Month2+1)).slice(-2);
let zDate2 = ("0" + (Day2)).slice(-2);
$('input.t-input[name="datestart"]').val(zDate+'/'+zMonth+'/'+Year);
$('input.t-input[name="dateend"]').val(zDate2+'/'+zMonth2+'/'+Year2);
}else{
//Заполняем поля из LS
$('input.t-input[name="datestart"]').val( localStorage.getItem('startDate') );
$('input.t-input[name="dateend"]').val( localStorage.getItem('finishDate') );
$('input.t-input[name="days"]').val( localStorage.getItem('countDays') );
};
getPrice();
btweenDate();
}, 2500);
//Переключение опций
$('div[class*="switcher"]').click(function(){
$(this).toggleClass('switcheron');
getPrice();
});
//При вызове формы из калькулятора
$('.calc-btn').click(function(){
$('.form-result').remove();
//Получаем все данные из полей и текста
let carName = $('.car-name .tn-atom').text().trim();//Название авто
let dayPrice = $('.day-price .tn-atom').text().trim();//Стоимость в сутки
let summPrice = $('.summ-price .tn-atom').text().trim();//Итоговая цена
let d1 = $('input.t-input[name="datestart"]').val();// дата страта
let d2 = $('input.t-input[name="dateend"]').val(); // дата окончания
let col = $('input.t-input[name="days"]').val(); // кол-во дней
//Опции
let opt1 = '', opt2 = '', opt3 = '', opt4 = '', opt5 = '';
if($('.switcher1').hasClass('switcheron')) opt1= $('.opt-name-1 .tn-atom').text();
if($('.switcher2').hasClass('switcheron')) opt2= $('.opt-name-2 .tn-atom').text();
if($('.switcher3').hasClass('switcheron')) opt3= $('.opt-name-3 .tn-atom').text();
if($('.switcher4').hasClass('switcheron')) opt4= $('.opt-name-4 .tn-atom').text();
if($('.switcher5').hasClass('switcheron')) opt5= $('.opt-name-5 .tn-atom').text();
let commonOption = '';
if(opt1!='') commonOption += opt1+'; ';
if(opt2!='') commonOption += opt2+'; ';
if(opt3!='') commonOption += opt3+'; ';
if(opt4!='') commonOption += opt4+'; ';
if(opt5!='') commonOption += opt5+'; ';
if(commonOption=='') commonOption = 'Нет';
let fillText = `
<div class="form-result t-text">
<div class="form-result-name-txt">Автомобиль: </div><div class="form-result-name">${carName}</div>
<div class="form-result-price-txt">Стоимость в сутки: </div><div class="form-result-price">${dayPrice}</div>
<div class="form-result-summPrice-txt">Итого: </div><div class="form-result-summPrice">${summPrice}</div>
<div class="form-result-d1-txt">Даты аренды: </div><div class="form-result-d1">${d1} - ${d2}</div>
<div class="form-result-col-txt">Кол-во дней аренды: </div><div class="form-result-col">${col}</div>
<div class="form-result-option-txt">Выбранные опции: </div><div class="form-option-col">${commonOption}</div>
</div>
`;
$('.uc-calc-form .t702__text-wrapper').append(fillText);
$('input[name="carName"]').val(carName);
$('input[name="daySumm"]').val(dayPrice);
$('input[name="finalSumm"]').val(summPrice);
$('input[name="period"]').val(d1+' - '+d2);
$('input[name="summDays"]').val(col);
$('input[name="dopOption"]').val(commonOption);
});
//Запрет ввода букв в дни
$('.uc-calc-car').on('input', 'input', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
//Запрет Enter в форме
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
});
</script>
<style>
#custom-handle {
width: 38px;
height: 38px;
border-radius: 50%;
top: 46%;
margin-top: -20px;
text-align: center;
line-height: 24px;
outline: none;
display: flex;
align-items: center;
justify-content: center;
}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover {
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
}
.ui-icon-background,.ui-state-active .ui-icon-background {
border: none;
background: none;
}
.ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min {
background:#d1d1d1;
border-radius: 8px;
}
div#slider {
border-radius: 8px;
border: none;
}
</style>
<style>
.uc-calc-car div[class*="switcher"] .tn-atom {
position: relative;
cursor:pointer;
}
.uc-calc-car div[class*="switcher"] .tn-atom:before {
content: "";
background-color: #fff;
position: absolute;
height: 16px;
width:16px;
top: -2px;
border-radius:100%;
left:0;
transition:all 0.3s ease-in-out;
}
.uc-calc-car .switcheron .tn-atom:before {
left:50% !important;
}
.uc-calc-car .switcheron .tn-atom:before {
background-color: #01AB31 !important;
}
svg.t-datepicker__icon {
/*display: none;*/
}
input.t-input[name="days"] {
padding: 0 10px;
}
.block-btn{
opacity: 0.3;
pointer-events: none;
}
.t396__elem.step, .t396__elem.step-txt,
.t396__elem.price-txt , .t396__elem.car-price{
display: none;
}
.form-result.t-text {display: grid;grid-template-columns: 1fr 2fr;text-align: left;padding: 20px 0 10px;font-size: 13px;}
.form-result div:nth-child(odd) {
font-weight: 500;
}
.form-result.t-text div {
box-shadow: 0 0 0 1px #dbdbdb;
padding: 4px;
margin-top: 1px;
margin-right: 1px;
padding-left: 8px;
}
</style>