Skip to main content
1 de 3

Conservar Valor en Input Javascript

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 misma 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()));
            $('#mes').append(new Option(FechaNueva.getMonth() + 1, FechaNueva.getMonth() + 1));
            $('#dia').append(new Option(FechaNueva.getDate(), FechaNueva.getDate()));
            $('#anio').val(FechaNueva.getFullYear())
            $('#mes').val(FechaNueva.getMonth() + 1)
            $('#dia').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.