Mostrar fechas con JavaScript

Vamos en este pequeño manual a ver varias formas de mostrar en pantalla la fecha actual.

Como sabéis todo script en javascript debe de empezar con <script lenguaje=javascript> para luego cerrarlo al final con </script> y entre estas dos funciones escribiremos todo el script.

Hay dos partes bien diferenciadas dentro de nuestro script

1.- la creación de variables
2.- la impresión en pantalla

Para la creación de las variables trabajaremos con varios métodos del objeto Date, ya que la fecha que nos ofrecerá el ordenador será siempre de tipo

Sat Dec 9 11:37:51 UTC+0100 2006

Y esto, obviamente, no es lo que queremos que aparezca en nuestra página.

1.- CREACION DE VARIABLES

A cada parte de la fecha, tenemos que asignarle una variable distinta.

Vamos a crear una fecha del tipo: Sábado, 9 de Diciembre de 2006 por lo que necesitamos cuatro variables a las que llamaremos:

textosemana que en este ejemplo sería = sábado
diames que en este ejemplo sería = 9
textomes que en este ejemplo sería = diciembre
ano que en este ejemplo sería = 2006

para la creación de esta fecha (o para otro tipo de impresión tipo 9/12/2006) necesitaremos otras variables, completándose la lista anterior con la siguiente:

diasemana que en este ejemplo sería = 6 (el día de la semana en número, el 0 para el domingo, el 6 para el sábado)
mes que en este ejemplo sería = 12

Y por supuesto, la más importante:

fecha

Empezamos con la creación de las variables:

var fecha=new Date();
a la variable “fecha” le asignamos el valor de la fecha actual

var diames=fecha.getDate();
a la variable “diames” le asignamos el día del mes (del 1 al 31)

var diasemana=fecha.getDay();
a la variable “diasemana” le asignamos el día de la semana en número, siendo 0 el domingo, 1 el lunes, …, 6 el sábado)

var mes=fecha.getMonth() +1 ;
a la variable “mes” le asignamos el día del mes en número (de 0 a 11) y le sumamos 1 para tener el mes tal y como lo utilizamos nosotros (de 1 a 12)

var ano=fecha.getFullYear();
a la variable “ano” le asignamos el año con cuatro cifras.  Si quisiéramos tener el año con dos cifras, el formato sería: var ano=fecha getYear();

Con esto ya tenemos toda la fecha desglosada.  Lo único que nos queda es saber (en texto) el día de la semana y el día del mes.  Para esto usaremos una matriz.

La sintaxis de la matriz es la siguiente:

Aplicamos la teoría. Crearemos primero la matriz para el día de la semana.  Como la semana tiene siete días, y a la variable que vamos a utilizar la llamamos textosemana, quedará de la siguiente forma:

ahora le asignamos valores a los “siete posibles textosemana”:

recordar que lo que el ordenador nos dará originalmente es diasemana que tendrá valores entre 0 y 6.

Lo que hacemos con esto es muy simple:

Cuando diasemana sea igual a 0, textosemana será igual a “Domingo”
…
Cuando diasemana sea igual a 6, textosemana será igual a “Sábado”.

Hacemos exactamente lo mismo con el nombre del mes:

recordar que aunquegetMonth(); nos devuelve el mes de 0 a 11, a la variable mes le hemos sumado 1.

2.- IMPRESIÓN EN PANTALLA

Para escribir la fecha en la pantalla utilizaremos el document.write(); donde entre los paréntesis tendremos que decirle qué es lo que ha de imprimir en pantalla, siempre utilizando comillas para el texto que queremos que escriba y sin comillas cuando queramos que aparezca la variable.

Os doy la forma para varios tipos de impresión de fecha:

9/12/2006
document.write("Fecha: " + diames + "/" + mes + "/" + ano + "<br>");

Sábado 9/12/2006
document.write("Fecha: " + textosemana[diasemana] + " " + diames + "/" + mes + "/" + ano + "<br>");

Sábado, 9 de Diciembre de 2006
document.write("Fecha: " + textosemana[diasemana] + ", " + diames + " de " + textomes[mes] + " de " + ano + "<br>");

3.- Y PARA TERMINAR

Hasta aquí, muy bien (más o menos).  La verdad es que lo único que hay que hacer es copiar y pegar (al final teneis el script completo). Pero, ¿cómo utilizo esto en mi página que estoy haciendo con Dreamweaver.

Cuando tengáis vuestra página hecha, habréis dejado una celda donde queréis poner la fecha. Es tan fácil como lo siguiente:

1. Seleccionas el script y lo copias en el portapapeles (botón derecho del ratón > copiar)

   Recuerda que el script que tienes al final te imprimirá la fecha de varias formas; selecciona la que te interesa y borra las demás

2. En vista diseño, colocas el cursor donde quieres que aparezca la fecha
3. Pasas a vista  código
4. Edición > Pegar
5. Vuelves a vista diseño

Recuerda que no verás en vista diseño la fecha, pero sí al verla en el navegador

4.- CODIGO COMPLETO