JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<div ng-app ng-controller="TicketController">
  <label>Choose a date to test: 
    <input type="date" ng-model="tempData.eventDate"/>
    <input type="button" ng-click="calculate()" value="Show remaining time"/>
</label>
  <br /> Remaining days: <span>{{ tempData.autoClosedDaysLeft }}
  <span ng-show="tempData.wouldNotShowYet">&nbsp;(But we would not show it yet.)</span>
  </span>
  <input type="button" ng-show="tempData.showAutoCloseAlert" value="Hide alert" />
</div>

JavaScript

function TicketController($scope) {

  $scope.tempData = {
    eventDate: new Date(),
    autoClosedDaysLeft: 0,
    showAutoCloseAlert: false,
    wouldNotShowYet: true
  };

  $scope.calculate = function() {

    let lastEvent = $scope.tempData.eventDate;
    let eventDate = moment(lastEvent);
    console.log("Event date: ", eventDate);
    console.log("Current date: ", moment());
    let dayDifference = moment().diff(eventDate, 'days');
    let now = moment();
    console.log("Difference", dayDifference);

    // Even if the popup appears after 7 days, we can still use the total time 
    // of 14 days for calculation of the remaining time to be shown.
    $scope.tempData.autoClosedDaysLeft = (14 - dayDifference < 0) ? 0 : (14 - dayDifference);

		// we wouldn't show this bar in case the ticket is less than 7 days old
    $scope.tempData.wouldNotShowYet = $scope.tempData.autoClosedDaysLeft > 7;

    // if the remaining time equals 0, "showAutoCloseAlert" should be set to true.
    $scope.tempData.showAutoCloseAlert = ($scope.tempData.autoClosedDaysLeft === 0);

    console.log("Autoclose: ", $scope.tempData.autoClosedDaysLeft);
    console.log("Show close alert: ", $scope.tempData.showAutoCloseAlert);
  }
}