Como modificar un campo de formulario tipo ‘Date’ con JS, poniendo una fecha inicial o borrar una de introducida.
Los campos fecha son los típicos campos de seleccionar una fecha

Esta vista es con Firefox, con el Chrome es algo mas cutre:

¡Vamos al lio!
Lo que queremos es según un ‘checkbox’ establecer una fecha determinada.
Vamos a crear una página simple con el campo y el ‘checkbox’ así como con jQuery para empezar a probar.
12345678910111213141516171819
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Prueba campos fecha</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body> <div> <input type="checkbox" id="fecha_proyecto"> <label>Utilizar fecha proyecto </label> </div> <div> <label for="name">Fecha Fin</label> <input type="date" id="fecha_seleccionada" placeholder="Data finalitsació" value=""> </div></body></html>
En mi caso tengo la fecha a utilizar en un input, que también lo crearemos.
1
<input type="text" id="fecha_inicio_proyecto" value="2019-02-11" readonly>
También añadimos un poquito de CSS para separa un poco los campos.
123
<style type="text/css"> div{ margin:25px 0 0 100px;}</style>
Ahora vamos a insertar el JS que verifica si se cambia el estado del checkbox
123456789
<script>$("#fecha_proyecto").on( 'change', function() { if( $(this).is(':checked') ) { // el checkbox ha sido seleccionado } else { // el checkbox ha sido deseleccionado }});</script>
Lo que queremos es que si se selecciona el checkBox pongamos en el campo la fecha del ‘input text’, y si lo desmarcamos que nos la borre.
Ahora al clicar tenemos que coger el valor del input ‘fecha_inicio_proyecto’
Primero os pongo el código que soluciona esto y lo comentamos.
123456789101112
$("#fecha_proyecto").on( 'change', function() { if( $(this).is(':checked') ) { // el checkbox ha sido seleccionado var d = new Date( $('#fecha_inicio_proyecto').val() ); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); d = d.toJSON().slice(0,10); $('#fecha_seleccionada').val(d); } else { // el checkbox ha sido deseleccionado $('#fecha_seleccionada').val(''); }});
Lo primero que hacemos es coger la fecha que tenemos en el input con id ‘fecha_inicio_proyecto’ y lo convertimos a un objeto Date() que guardamos en variable ‘d’.
1
var d = new Date( $('#fecha_inicio_proyecto').val() );

Si miramos el valor de d.getTimezoneOffset() nos da : -60
Si miramos los minutos d.getMinutes() nos da : 50
1
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
ponemos en la fecha ‘d’ los minutos seteados respecto a nuestra zona horaria.
( 50 – ( -60 ) ) -> (50 + 60) son 50 minutos + 1 hora
Por lo tanto si miramos ahora el objeto ‘d’ tenemos:

En nuestro caso nos incrementa la hora de 00 a 01, pero como solo nos interesa la fecha no nos afecta.
Una vez tenemos la fecha que queremos seteada a nuestra zona horaria la pasamos a un valor JSON que se pasa a cadena, esta cadena la cortamos del valor 0 al 10
1
d = d.toJSON().slice(0,10);

Y para acabar mandamos este valor al campo input ‘date’:
1
$('#fecha_seleccionada').val(d);
Para limpiar el campo y ponerlo a dd/mm/aaa, solo le tenemos que pasar una cadena vacía.
1
$('#fecha_seleccionada').val('');
Espero se haya entendido y pueda ayudar!, os dejo el código completo:
12345678910111213141516171819202122232425262728293031323334353637383940
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Prueba campos fecha</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body><style type="text/css"> div{ margin:25px 0 0 100px;}</style> <div> <input type="checkbox" id="fecha_proyecto"> <label>Utilizar fecha proyecto </label> </div> <div> <label for="name">Fecha Fin</label> <input type="date" id="fecha_seleccionada" placeholder="Fecha fin" value=""> </div> <div> <input type="text" id="fecha_inicio_proyecto" value="2019-02-11" readonly> </div> <script>$("#fecha_proyecto").on( 'change', function() { if( $(this).is(':checked') ) { // el checkbox ha sido seleccionado var d = new Date( $('#fecha_inicio_proyecto').val() ); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); d = d.toJSON().slice(0,10); $('#fecha_seleccionada').val(d); } else { // el checkbox ha sido deseleccionado $('#fecha_seleccionada').val(''); }});</script></body></html>
Sé el primero en comentar