0

Tengo un script que utilizo para calcular la diferencia en días de dos fechas en mi Html de asp.net MVC, y ya logre que me realizara el cálculo, pero no logro que se aplique a cada registro que se agrega en mi tabla, ya me esta realizando el cálculo pero únicamente se aplica al primer registro, los demás cuando les cambio la fecha no me realiza el cálculo, estoy utilizando c# para llenar la tabla, agradezco quien me pueda apoyar llevo ya dos dias y no lo lógro.

@model IEnumerable<ResumenModel>
@{
    ViewData["Title"] = "Free Days Result";
}

    @*=========== TABLA DE RESULTADOS DE LA BUSQUEDA ============*@
    <table class="table">
        @*=========== CABECERA DE LA TABLA ============*@
        <thead class="table-success">
            <tr>
                <th>BL</th>
                <th>Container</th>
                <th>Free days</th>
                <th>Last free day</th>
                <th>
                    <div>Return date</div>
                    <div><small>(Fecha devolución)</small></div>
                </th>
                <th>Chargeable days</th>
               @* <th>Chargeable amount</th>*@
            </tr>
        </thead>
         @*=========== CUERPO DE LA TABLA ============*@
        <tbody id="myTable">
            @foreach (var resumen2 in Model)
            {
                <tr>
                    <td>@resumen2.CHB_BL </td>
                    <td>@resumen2.CHE_Equipment_Number</td>
                    <td>@resumen2.CCD_Number_of_Free_Days </td>
                    <td>
                        <output id="lastFreeDay" class="form-control">
                            @(resumen2.CCD_Last_Free_Day_Date.ToString("yyyy-MM-dd"))
                        </output>
                    </td>
                    <td>
                        <p class="w-50">
                            @{
                                DateTime FechaActual = DateTime.Now;
                                string Fechacambio = FechaActual.ToString("yyyy-MM-dd");
                                <input class="btn-outline-grey" type="date" id="fechaCambio" 
                                min="@Fechacambio" name="fechaCambio"
                                oninput="calculardiasDiscount()">
                            }
                        </p>
                    </td>
                   @======== LLAMADO DE LA FUNCION PARA MOSTRAR EL CALCULO=====@
                    <td>                       
                       <output id="chargeableDays" class="form-control" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@section Scripts{
<script>
    function calculardiasDiscount() {
      var vLastFreeDay = new Date(document.getElementById("lastFreeDay").value);
      var vFechaCambio = new Date(document.getElementById("fechaCambio").value);
      
      alert("ENTRÉ A LA FUNCION" + vLastFreeDay + " ** " + vFechaCambio);
      
      if (vFechaCambio > vLastFreeDay)
      {
        var diff = vFechaCambio.getTime() - vLastFreeDay.getTime();
        document.getElementById("chargeableDays").value = Math.round(diff / (1000 * 60 * 60 24));
      }
      else if (vFechaCambio < vLastFreeDay) {
            alert("La fecha de devolución debe ser mayor a la Last Free Day");
            document.getElementById("chargeableDays").value = 0;
      }
    }
</script>
}

esta es mi tabla

1
  • 1
    Mira el problema es que todos tus elementos tienen el mismo id, id="lastFreeDay" id="fechaCambio" por ende solo te va funcionar uno. Lo que debes hacer es tener un id diferente para cada uno y mandarlos como parámetro de la función calcular Commented el 27 may. 2022 a las 18:42

1 respuesta 1

0
@model IEnumerable<ResumenModel>
 @{ViewData["Title"] = "Free Days Result";
 var idLast= "";
 var idFecha= "";
 var index= 0;
}

@*=========== TABLA DE RESULTADOS DE LA BUSQUEDA ============*@
<table class="table">
    @*=========== CABECERA DE LA TABLA ============*@
    <thead class="table-success">
        <tr>
            <th>BL</th>
            <th>Container</th>
            <th>Free days</th>
            <th>Last free day</th>
            <th>
                <div>Return date</div>
                <div><small>(Fecha devolución)</small></div>
            </th>
            <th>Chargeable days</th>
           @* <th>Chargeable amount</th>*@
        </tr>
    </thead>
     @*=========== CUERPO DE LA TABLA ============*@
    <tbody id="myTable">
        @foreach (var resumen2 in Model)
        {   
           @{
             index = index + 1;
             idLast= String.Concat("last_", index);
             idFecha= String.Concat("fecha_", index);
            }
            
            <tr>
                <td>@resumen2.CHB_BL </td>
                <td>@resumen2.CHE_Equipment_Number</td>
                <td>@resumen2.CCD_Number_of_Free_Days </td>
                <td>
                    <output id="@idLast" class="form-control">
                        @(resumen2.CCD_Last_Free_Day_Date.ToString("yyyy-MM-dd"))
                    </output>
                </td>
                <td>
                    <p class="w-50">
                        @{
                            DateTime FechaActual = DateTime.Now;
                            string Fechacambio = FechaActual.ToString("yyyy-MM-dd");
                            <input class="btn-outline-grey" type="date"id="@idFecha" 
                            min="@Fechacambio" name="fechaCambio"
                            oninput="calculardiasDiscount(@idLast, @idFecha)">
                        }
                    </p>
                </td>
               @======== LLAMADO DE LA FUNCION PARA MOSTRAR EL CALCULO=====@
                <td>                       
                   <output id="chargeableDays" class="form-control" />
                </td>
            </tr>
        }
    </tbody>
</table>
</div>

 @section Scripts{
  <script>
  function calculardiasDiscount(idLast, idFecha) {
  var vLastFreeDay = new Date(document.getElementById("idLast").value);
  var vFechaCambio = new Date(document.getElementById("idFecha").value);
  
  alert("ENTRÉ A LA FUNCION" + vLastFreeDay + " ** " + vFechaCambio);
  
  if (vFechaCambio > vLastFreeDay)
  {
    var diff = vFechaCambio.getTime() - vLastFreeDay.getTime();
    document.getElementById("chargeableDays").value = Math.round(diff / (1000 * 
 60 * 60 24));
   }
   else if (vFechaCambio < vLastFreeDay) {
        alert("La fecha de devolución debe ser mayor a la Last Free Day");
        document.getElementById("chargeableDays").value = 0;
    }
  }
 </script>
}

si no me estoy equivocando con la sintaxis quedaría algo así

1
  • amigo, tu comentario me ayudo mucho, no fue la solución pero si me oriento bastante de como hacerlo, mil gracias! Commented el 2 jun. 2022 a las 20:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.