Estoy trabajando con Materialize 1.0.0 y ayer formule una pregunta de cómo separar el datepicker en 3 campos select, la cual me dieron solución.
Actualmente tengo otro problema que no logro solucionar o no tengo los conocimientos suficientes.
Necesito que la fecha que quede en el datepicker se conserve porque los 3 campos SELECT estarán ocultos.
También hay un backend ya construido en VB.NET que hace un CRUD y cuando guarda se lleva es lo 3 valores de los 3 selects.
hay alguna forma de que pueda conservar la fecha en el mismo campo.
Dejo el código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Dirección</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- AÑO-->
<div class="input-field col s4">
<select id="anio"></select>
<label>Año</label>
</div>
<!-- MES -->
<div class="input-field col s4">
<select id="mes"></select>
<label>Mes</label>
</div>
<!-- DIÁ -->
<div class="input-field col s4">
<select id="dia"></select>
<label>Diá</label>
</div>
</div>
<div class="fecha">
<input type="text" class="datepicker" id="fecha" placeholder="fecha completa">
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script>
$('#fecha').on('change', function () {
var Fecha = $('#fecha').val();
var FechaNueva = new Date(Fecha)
$('#anio').append(new Option(FechaNueva.getFullYear(), FechaNueva.getFullYear())).val(FechaNueva.getFullYear());
$('#mes').append(new Option(FechaNueva.getMonth() + 1, FechaNueva.getMonth() + 1)).val(FechaNueva.getMonth() + 1);
$('#dia').append(new Option(FechaNueva.getDate(), FechaNueva.getDate())).val(FechaNueva.getDate());
$('select').formSelect();
})
let mostrando = document.getElementById('fecha').value;
document.getElementById('fecha').innerHTML = mostrando;
</script>
</body>
</html>
Ya he intentato usando innerHTML para asignar un valor pero no se conserva.
Cualquier aporte me ayudara mucho.
data-*
que sirven para guardar información extra en elemento. Por ejemplo si pones en un solo elemento:data-fechaOne="Fecha1" data-fechaTwo="Fecha2" data-fechaThree="Fecha3"
tendrás tres valores distintos en un mismo elemento. Esos valores se pueden cambiar, recuperar, enviar, etc. De todos modos no es clara tu pregunta.