Datepicker sin JQuery y sin Bootstrap

lunes, julio 6th, 2020

Si eres como yo que deseas ir dejando atrás todo lo que tenga que ver con Jquery y bootstrap, ya se por su ralentización en cuanto a la carga de sitios que lo implementan, ó porque deseas ir aprendiendo CSS y javascript desde cero, te verás en la necesidad de buscar alternativas para el manejo de calendarios y fechas en tu web.

Las alternativas pasan por separar en una lista desplegable (comboBox) el día mes y año, hasta construir tú propio componente (si tienes tiempo adelante), o en su defecto buscar una alternativa viable. PikaDay es un buena opción si no tienes tiempo y no quieres hacer todo con combos. A continuación te daré lo básico sobre cómo usar este componente y usarlo para tus proyectos.

¿Donde obtengo una alternativa para manejo de calendario con javascript ?

Puedes bajar visitar su sitio en Github y replicar el repositorio para examinar todas las funciones y ejemplos de Pikaday

visitar PikaDay

O bien puede replicar el repositorio si ya tiene Git instalado en tu pc

git clone https://github.com/Pikaday/Pikaday.git

La documentación es bastante completa, por lo que no daré mayores detalles, por supuesto esta inglés por lo que si tienes problemas con alguna parte, déjame un comentario y te ayudare en lo que pueda.

Cómo usar un calendario solo con javascript y no con jquery

A continuación lo pasos para crear un template

Paso 1 ) Crear un input para que contenga el calendario.

<input type="text" id="datepicker">

Paso 2 ) agregar el plugin del calendario.

<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

También puedes obtener el CDN aquí

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Paso 3 ) Ahora ya puedes cargar tu pagina y ver el resultado, aqui te comparto el html completo.

<html>
<head>
<title>
	Pikaday Demo 
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
</body>
</html>

Cómo obtener el valor del calendario

Una vez que ya tenes instalado el datepicker, quizá necesite consultar el valor del datepicker en cualquier momento, para ello agregaremos un botón al ejemplo anterior

<button type="button" class="btn btn-primary" id="buscar"> buscar </button>

ahora agregaremos un alert que nos devuelva el valor de la fecha del datepicker, esto lo hacemos con el datepicker

buscar.onclick=function(){
            var fec=document.getElementById('datepicker');
            alert(fec.value);   
        }

Lo anterior te devuelve el valor de la fecha del picker seleccionado, pero quizá desees formatearlo, para ello agreguemos un par de líneas

var picker = new Pikaday({ field: document.getElementById('datepicker') });
            alert( picker.getDate());

El Pikaday tiene muchas funciones te recomiendo que las consultes en el repositorio del componente. Puedes consultar en vivo el codigo usado en este articulo a continuación

Consultar en vivo

También de dejo el código completo que puede copiar en un bloc de notas y probar a continuación

<html>
<head>
<title>
	Pikaday Demo 
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<button type="button" class="btn btn-primary" id="buscar"> buscar </button>

<script>
	var picker = new Pikaday({ field: document.getElementById('datepicker') });

	buscar.onclick=function(){
        var fec=document.getElementById('datepicker');
            alert(fec.value);   
	var picker = new Pikaday({ field: document.getElementById('datepicker') });
            alert( picker.getDate());
            
        }
</script>
</body>
</html>

¿Cómo convertir la fecha a un valor Fecha de mysql correcto?

Cuando trabajas con php y mysql, es posible que necesites procesar los valores de fecha antes de enviarlos al servidor, esto por que los valores MYSQL no son compatibles con los valores JAVASCRIPT POR DEFAULT y necesitas dejarlo listo para que el servidor simplemente ejecuta las consultas, para ello tengo a bien compartirte la siguiente función.

//convierte un valor fecha a uno válido de Mysql
function convertDateMysql(strDate){
   return strDate.substr(strDate.length-4,4 )+"-"+
   strDate.substr(strDate.length-10,2 )+"-"+
   strDate.substr(strDate.length-7,2 );
}

La función te devuelve un valor en el formato: YYYY-MM-DD