Conversiones de fecha útiles entre MYSQL, PHP Y JavaScript

lunes, julio 6th, 2020

El tema de las fecha es un asunto serio, conversiones aqui, formatos allá, y compatibilizar todo entre diferentes lenguajes y bases de datos, es todo un aprendizaje aparte. He decidido recopilar en este post todos aquellos comando útiles de conversiones de fechas y otros trucos que me han servido y que puedas utilizar si acaso lo consideras útil.

Comandos de fecha para Mysql

A continuación los comandos útiles para Mysql

1)Devolver una fecha de acuerdo a tu huso horario

A menos que tu servidor este en tu oficina o en tu país, difícilmente estará en el mismo huso horario, por lo general los servidores están en EEUU ya sea en la costa oeste o este, casi siempre en otro huso horario al de tu país, por esa razón cuando trabajes con campos Datetime en mysql debes hacer un pequeño ajuste para mostrar los resultados.

Por ejemplo puede ser que tu servidor se encuentre 6 horas después que tu país, por lo que cuando realizamos consultas debemos presentarlas con un ajuste:

date(DATE_SUB(fecha, INTERVAL 6 HOUR))

Puedes cambiar el número 6 ajustándose al horario de tu país con la función DATE_SUB(campo, INTERVAL valor intervalo)

El intervalo puede ser cualquiera de estos :

  1. MICROSECOND
  2. SECOND
  3. MINUTE
  4. HOUR
  5. DAY
  6. WEEK
  7. MONTH
  8. QUARTER
  9. YEAR
  10. SECOND_MICROSECOND
  11. MINUTE_MICROSECOND
  12. MINUTE_SECOND
  13. HOUR_MICROSECOND
  14. HOUR_SECOND
  15. HOUR_MINUTE
  16. DAY_MICROSECOND
  17. DAY_SECOND
  18. DAY_MINUTE
  19. DAY_HOUR
  20. YEAR_MONTH

Comandos de fecha para PHP

Dejaré aqui los comando útiles par a php

1)Cómo obtener la fecha inicial y la fecha final de un mes en php

Cuando necesitas consultar una tabla por sus campos de fecha, quizá te sea útil establecer unos parámetros de fecha para un periodo por default, que generalmente es el mes actual, así puedes mostrar el conjunto de datos mas reciente y luego permitir al usuario que cambie la fecha para que pueda consultar otro conjunto de registros. El comando para hacerlo es el siguiente:

Comando para obtener el primer día del mes actual

$cFecha1=date('Y-m-01');

Comando para obtener el último día del mes actual

$cFecha2=date('Y-m-t');

Comandos para fechas de JavaScript

Aquí te comparto comandos para javascript. A los que venimos de lenguajes antiguos el manejo de las fechas en javascript nos puede parecer desconcertante, por ejemplo el método getday() no te devuelve el día de una fecha sino un entero que representa el dia de la semana; si lo que deseas es el día del mes entonces debes usar getDate().

Te recuerdo que este blog es para programadores que vienen de lenguajes viejos y que todavía no han hecho el pase a lenguajes web, si eres nativo de la web, nuestro contenido bien puede parecer trivial o demasiado básica.

1)Cómo generar la fecha inicial y final de un mes en JavaScript

Al igual que con Php es posible que necesites obtener la primera fecha y la última para enviar los parámetros de una consulta.

Para obtener la fecha inicial:

var dt= new Date();
var dtFirst=Date(1,dt.getMonth()+1,dt.getYear()+1900);

Para obtener la fecha final:

var dt= new Date();
var y = dt.getFullYear();
var m = dt.getMonth();
var dtEnd= new Date(y, m + 1, 0);
        

2)Preparar una fecha en formato válido para mysql en JavaScript

Sucede que cuando realizas consultas a una base de datos Mysql necesita enviar las fechas ya formateadas, así el procesamiento se realiza en el lado del cliente y tu servidor no se ve cargado con procesamiento extra innecesariamente. Te comparto una función que puedes uar en JavaScript para convertir a formato Mysql

function convertDateMysql(strDate){
            const parts = strDate.split('/');
            const day = parts[0];
            const month = parts[1];
            const year = parts[2];
            return year+"-"+month.padStart(2, "0")+"-"+day.padStart(2, "0");
		}

Iré dejando mas código útil para el tratamiento de fecha.


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

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

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



Redes sociales