How to create a Countdown timer that shows the time remaining between two dates

0

I am trying to create a timer that indicates the time that remains between the start of a date (StartDate) and the end of a date (FinishDate).

  • The entity FitnessGoal has a beginning and an end, that is, their respective startdate and finishdate.

Model FitnessGoal:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace FitnessWebApplication.Models
{
    [Table("FitnessGoals")]
    public class FitnessGoals
    {

        [Key]
        public int ID { get; set; }

        public string CreatedBy { get; set; }

        public string Name { get; set; }

        public string Goal { get; set; }


        [DataType(DataType.Date)]
        [Column(TypeName = "DateTime2")]
        public DateTime StartDate { get; set; }

        [Column(TypeName = "DateTime2")]
        [DataType(DataType.Date)]
        public DateTime FinishDate { get; set; }

        public int Weight { get; set; }

        public enum Goals
        {
            Bulk,
            Cut
        }
    }
}

View index where the countdown and fitnessgoals models will be created:

@model IEnumerable<FitnessWebApplication.Models.FitnessGoals>

@{
    ViewBag.Title = "Index";
}

<h2>Your Fitness Goals</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Goal)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StartDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FinishDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Weight) (kg)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Weight) (kg)
        </th>

        <th>
            <b>Remaining time</b>
        </th>

        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name) 
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Goal) 
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StartDate) 
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FinishDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Weight) kg
        </td>

        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}

</table>
    
asked by Bryan Romero 21.08.2018 в 16:05
source

0 answers