Калькуляция цены при выборе даты

390

15 февраля 2017, 21:22

Приветствую! Подскажите как имея 2 поля даты приезда и уезда можно реализовать калькуляцию суммы. На данный момент с базы выгружается сумма за день, нужно в real-time при выборе дат чтобы производилась калькуляция. Т.е.

<label for="dtarrive">Дата заезда</label> <input type="date" class="form-control" id="dtarrive" name="dtarrive"/> <label for="dtdepart">Дата выезда</label> <input type="date" class="form-control" id="dtdepart" name="dtdepart"/> <label for="price">Цена за 1 день</label> <input type="hidden" class="form-control" id="price" name="price" value="{$val.price}" /> <input type="text" class="form-control" value="{$val.price}" disabled />

<label for="price">Итоговая цена</label> ?????

Answer 1

Если я правильно понял, то дату приезда и дату отъезда вписывает пользователь, находясь на странице и как только он ввел обе даты, необходимо ему вывести итоговую сумму.

Если это не верно, то уточните вопрос и я перепишу ответ, а если верно,то здесь работа с датами

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<label for="dtarrive">Дата заезда</label> 
<input type="date" class="form-control" id="dtarrive" name="dtarrive"/> 
<label for="dtdepart">Дата выезда</label> 
<input type="date" class="form-control" id="dtdepart" name="dtdepart"/> 
<label for="price">Цена за 1 день</label> 
<input type="hidden" class="form-control" id="price" name="price" value="10000" /> 
<input type="text" class="form-control" value="10000" disabled /> 
 
<label for="price">Итоговая цена</label><span id="cost"></span> 
<script> 
  var dtarrive=0, dtdepart=0, price=$('#price').val(); 
  $('#dtarrive,#dtdepart').change(function(){ 
    dtarrive=$('#dtarrive').val(); 
    dtdepart=$('#dtdepart').val(); 
    if(dtarrive && dtdepart ) { 
        //для I-7  
        //dtarrive=new Date(dtarrive.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1')); 
      dtarrive=new Date(dtarrive); 
      dtdepart=new Date(dtdepart); 
      var cost=Math.round((dtdepart-dtarrive)/1000/3600/24)*price; 
      $('#cost').text(cost); 
    } 
  }); 
</script>

как вы видите для наглядности я подставил стоимость дня 10000 и подключил библиотеку jquery для быстроты обращения к элементам, также добавил вывод в span

Answer 2

как можно убрать выбор даты которая прошла?

Если я правильно понял, то вам необходимо скрывать от пользователя поле выбора даты после того как он(пользователь) внес значение.

Если это не верно, то уточните вопрос и я перепишу ответ, а если верно,то здесь необходимо дополнить действие на событие изменения поле даты

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<label for="dtarrive">Дата заезда 
   <input type="date" class="form-control" id="dtarrive" name="dtarrive"/> 
</label> 
<label for="dtdepart">Дата выезда 
   <input type="date" class="form-control" id="dtdepart" name="dtdepart"/> 
</label> 
<label for="price">Цена за 1 день</label> 
<input type="hidden" class="form-control" id="price" name="price" value="10000" /> 
<input type="text" class="form-control" value="10000" disabled /> 
 
<label for="price">Итоговая цена</label><span id="cost"></span> 
<script> 
  var dtarrive=0, dtdepart=0, price=$('#price').val(); 
  $('#dtarrive,#dtdepart').change(function(){ 
    dtarrive=$('#dtarrive').val(); 
    dtdepart=$('#dtdepart').val(); 
    if(dtarrive) $('label[for="dtarrive"]').fadeOut(); 
    if(dtdepart) $('label[for="dtdepart"]').fadeOut(); 
    if(dtarrive && dtdepart ) { 
        //для I-7  
        //dtarrive=new Date(dtarrive.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1')); 
      dtarrive=new Date(dtarrive); 
      dtdepart=new Date(dtdepart); 
      var cost=Math.round((dtdepart-dtarrive)/1000/3600/24)*price; 
      $('#cost').text(cost); 
    } 
  }); 
</script>

как вы видите здесь была изменена структура html для удобства обращения к скрываемым элементам и добавлено пару строк в скрипте