0

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.

3
  • A que te refieres con conservar la misma fecha?
    – TheVicShow
    Commented el 8 feb. 2019 a las 14:55
  • No se entiende bien la pregunta. Parece sin embargo que lo que necesitas es algo como los atributos 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.
    – A. Cedano
    Commented el 8 feb. 2019 a las 15:04
  • Nesecito es que el dato que queda en el input de datepicker se conserve, asi se recargue la página Commented el 8 feb. 2019 a las 15:05

1 respuesta 1

0

javascript trabaja de lado del cliente y mantener el valor de las variables pues es imposible ya que el hecho de recargar es volver a iniciar todo el código.

Pero puedes utilizar "cookies" (es una pequeña información almacenada en el navegador) que te ayudarán a mantener los valores.

Nota : Para que entiendas lo mejor que sucede con los métodos de las "cookies" te invito a leer la siguiente página : https://www.quirksmode.org/js/cookies.html que te da una explicación a fondo.

En el código adjunto te dejo los comentarios explicando de que es lo que sucede.

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

        // ------ START métodos de cookies ----- 

        function createCookie(name,value,days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

        function eraseCookie(name) {
            createCookie(name,"",-1);
        }
        // ------ END métodos de cookies ----- 

        // -- Creamos el método que se va encargar de asignar el valor a tu "input#fecha" -- 
        function setValue(){

            var _date = readCookie("pickedDate");
            if(_date != null){
                console.log(_date);
                //Asignamos el valor de la cookie
                document.getElementById('fecha').value = _date; 

            } else { 

                //La primera vez que se inicia el método es un hecho que no
                //va existir la cookie y verás este mensaje despues
                //de realizar el onchange este mensaje ya no deberia aparecer
                alert("Aun no hay cookies"); 
            }
        }

        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();

            //Borramos la cookie cada que realices un "on change"  
            eraseCookie("pickedDate"); 

            //Obtenemos el valor de la fecha asignada
            let mostrando = document.getElementById('fecha').value; 

            //Colocamos el valor a la cookie
            createCookie("pickedDate",mostrando,1); 

        });


        //Por último llamamos al método cada que recargues
        //la página que va validar si hay valores en la cookie

        setValue();

    </script>
</body>
</html>

La primera vez que se ejecuta

introducir la descripción de la imagen aquí

Después de hacer el "on change" y recargar el sitio

introducir la descripción de la imagen aquí

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.