Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Hacer un input tipo "date" que resalte si el valor es diferente al del value

HTML - Hacer un input tipo "date" que resalte si el valor es diferente al del value

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Hacer un input tipo "date" que resalte si el valor es diferente al del value

Publicado por maikol (3 intervenciones) el 07/01/2020 14:44:13
buenas compañer@s queria confirmar con ustedes como puedo hacer que un input tipo "date" se resalte si el valor que se le agrega es diferente al del value, me explico mejor, si coloco en el value "31-12-2019" y otra persona le cambia la fecha a 07-01-2020, se resalte el cuadro, puede ser a un color rojo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Hacer un input tipo "date" que resalte si el valor es diferente al del value

Publicado por joel (460 intervenciones) el 07/01/2020 17:37:11
Hola Maikol, de alguna manera tendrás que guardar el valor del value fuera del input, ya que al seleccionar otra fecha, cambiar-ha el valor del value...
Lo puedes guardar en una variable de js o en otro input oculto.
Si nos muestras el código html, intento modificatelo para que con js lo detecte.


Para cambiar el color del input, tendrás que hacerlo con js para añadirle o quitarle el estilo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Hacer un input tipo "date" que resalte si el valor es diferente al del value

Publicado por maikol (3 intervenciones) el 07/01/2020 18:00:40
Hola, gracias por la respuesta, el código es este

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="table table-bordered" id="tabusu" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Fecha</th>
 
    </tr>
  </thead>
  <tbody>
 
    <tr>
 
      <td><input type="text" name="" value="2020-01-01"></td>
   </tr>
  </tbody>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Hacer un input tipo "date" que resalte si el valor es diferente al del value

Publicado por joel (460 intervenciones) el 08/01/2020 08:02:29
Hola Maikol, seria algo así para cuando pierde el foco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style>
.err {border-color:Red;}
</style>
</head>
 
<body>
 
<table class="table table-bordered" id="tabusu" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Fecha</th>
 
    </tr>
  </thead>
  <tbody>
 
    <tr>
 
      <td><input type="text" name="" id="fecha" value="2020-01-01"></td>
   </tr>
  </tbody>
</table>
 
</body>
</html>
 
<script>
var el=document.getElementById("fecha");
var fechaInicial=el.value;
el.addEventListener("blur", function() {
    el.classList.remove("err");
    if(this.value!=fechaInicial) {
        el.classList.add("err");
    }
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 6
Ha disminuido su posición en 5 puestos en HTML (en relación al último mes)
Gráfica de HTML

Hacer un input tipo "date" que resalte si el valor es diferente al del value

Publicado por maikol (3 intervenciones) el 21/01/2020 18:42:43
gracias amigo, me fue muy util
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar