Skip to main content
se eliminaron 6 caracteres en el cuerpo
Origen Enlace

hay alguna forma de que pueda conservar la misma fecha en el mismo campo.

hay alguna forma de que pueda conservar la misma fecha en el mismo campo.

hay alguna forma de que pueda conservar la fecha en el mismo campo.

Olvide mencionarte que puedes asignar el val en la misma linea del append, ya corregi esa parte del codigo, para que lo tomes en cuenta en tu codigo real
Origen Enlace
<!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()));
            $('#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>
<!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>
<!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>
Origen Enlace

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.