У меня есть статический индикатор прогресса пирога, я хочу показать динамическое значение в нем

Question

У меня есть план на один месяц, конечно, и в плане на один месяц, я хочу показать оставшиеся дни в процентах в моем прогрессе загрузочного пирога.

Мой код:

    <div class="row">
        <div class="row">
                <div style="padding-top: 10px;" class="col-6 ">
                    <div class="progress yellow">
                        <span class="progress-left">
                            <span class="progress-bar"></span>
                        </span>
                        <span class="progress-right">
                            <span class="progress-bar"></span>
                        </span>
                        <div class="progress-value">75%</div>
                    </div>
                        <p align="center">Remainig Days</p>
                </div>
            </div>
     </div>

У меня есть началодата и дата окончания в моей переменной $objDateStart, $objDateEnd, подобной этой

$objDateStart = DateTime::createFromFormat('Y-m-d', $vDetail['start_date']);
$objDateEnd = DateTime::createFromFormat('Y-m-d', $vDetail['end_date']);

$objDateStart = 2019-09-20
$objDateEnd   = 2019-10-20

в текущем плане. У меня осталось два дня в соответствии с оставшимися днями. Я хочу показать индикатор прогресса

Не могли бы вы помочь, как показать оставшиеся дни динамически.

Answer 1

Вот один из способов вычислить процент прошедших дней в Javascript:

var objDateStart = "2019-09-20T00:00:00Z"
var objDateEnd = "2019-10-20T00:00:00Z"
var today = new Date().toISOString().split('T')[0] + 'T00:00:00Z';

var totalDays = (new Date(objDateEnd).valueOf() - new Date(objDateStart).valueOf()) / 1000 / 60 / 60 / 24
var remainingDays = (new Date(objDateEnd).valueOf() - new Date(today).valueOf()) / 1000 / 60 / 60 / 24

console.log(totalDays, remainingDays);

var ratio = ((totalDays - remainingDays) / totalDays).toFixed(2);
var percentage = Math.round(ratio * 100) + "%";

console.log(ratio, percentage);

document.getElementById('progress-percentage').innerText = percentage;
document.getElementById('progress-count').innerText = remainingDays + " ";

<div class="row">
  <div class="row">
    <div style="padding-top: 10px;" class="col-6 ">
      <div class="progress yellow">
        <span class="progress-left">
          <span class="progress-bar"></span>
        </span>
        <span class="progress-right">
          <span class="progress-bar"></span>
        </span>
        <div id="progress-percentage" class="progress-value">75%</div>
      </div>
      <p align="center"><span id="progress-count"></span>Remainig Days</p>
    </div>
  </div>
</div>