1

Приветствую! Подскажите как имея 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> ?????
2
  • где будет прописана сумма?
    – L. Vadim
    14 фев 2017 в 17:12
  • В <label for="price">Итоговая цена</label> <input type="text" ..... disabled /> Дальше будет садится в базу
    – Den
    14 фев 2017 в 17:22

2 ответа 2

1

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

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

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

<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 для удобства обращения к скрываемым элементам и добавлено пару строк в скрипте

2
  • либо if(dtarrive) $('#dtarrive').attr('disabled','disabled'); if(dtdepart) $('#dtdepart').attr('disabled','disabled');
    – Mcile
    15 фев 2017 в 13:12
  • если вы хотите скрыть выбор не ценою сокрытия поля, а ценою сокрытия возможности выбора
    – Mcile
    15 фев 2017 в 13:18
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

1
  • Идеально подробно и понятно! Благодарю, еще вопрос как можно убрать выбор даты которая прошла?
    – Den
    15 фев 2017 в 3:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.