Cambiar el valor de un campo fecha con JS

Publicado por Quanticbyte en 5 marzo, 2019

Categorias : Dosis Diaria

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.



		
		
			
			

			
			<!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>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						<!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.



		
		
			
			

			
			<input type="text" id="fecha_inicio_proyecto" value="2019-02-11"  readonly>
			
				
					
				
					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.



		
		
			
			

			
			<style type="text/css">
	div{ margin:25px 0 0 100px;}
</style>
			
				
					
				
					1
2
3
				
						<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



		
		
			
			

			
			<script>
$("#fecha_proyecto").on( 'change', function() {
    if( $(this).is(':checked') ) {
        // el checkbox ha sido seleccionado        
    } else {
        // el checkbox ha sido deseleccionado    
    }
});
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						<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.



		
		
			
			

			
			$("#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('');
    }
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						$("#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’.



		
		
			
			

			
			var d = new Date( $('#fecha_inicio_proyecto').val() );
			
				
					
				
					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



		
		
			
			

			
			d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
			
				
					
				
					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



		
		
			
			

			
			d = d.toJSON().slice(0,10);
			
				
					
				
					1
				
						d = d.toJSON().slice(0,10);

Y para acabar mandamos este valor al campo input ‘date’:



		
		
			
			

			
			$('#fecha_seleccionada').val(d);
			
				
					
				
					1
				
						$('#fecha_seleccionada').val(d);

Para limpiar el campo y ponerlo a dd/mm/aaa, solo le tenemos que pasar una cadena vacía.



		
		
			
			

			
			$('#fecha_seleccionada').val('');
			
				
					
				
					1
				
						$('#fecha_seleccionada').val('');

Espero se haya entendido y pueda ayudar!, os dejo el código completo:



		
		
			
			

			
			<!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>
			
				
					
				
					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
40
				
						<!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>

Facebook

Twitter

Sé el primero en comentar

Cambiar el valor de un campo fecha con JS

Deja un comentario Cancelar respuesta