JavaScript - Mostrar fecha en el orden año, mes y dia

   
Vista:
Imágen de perfil de Roberto

Mostrar fecha en el orden año, mes y dia

Publicado por Roberto (9 intervenciones) el 16/05/2017 18:22:28
Hola tengo un script en el cual uso una caja de tetxo la cual me despliega un calendario el problema que tengo es que me pone la fecha en el orden día, mes y año.

Lo que necesito es que me ponga la fecha en el orden de año, mes y día:

Les dejo mi código:

1
2
3
4
<link rel="stylesheet" type="text/css" href="css/cssCalendario.css">
<script language="javascript" src="js/jCalendario.js"></script>
 
<input type="text" name="fechaentrada" class="campofecha" size="12">

Código de la hoja de estilo cssCalendario.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
body{
	   font-family: tahoma, verdana, sans-serif;
      }
      .capacalendario{
	    width: 219px;
	    position: absolute;
	    display: none;
      }
      .capacalendarioborde{
	    padding: 3px;
	    border: 1px solid #ddd;
      }
      .diassemana{
	     overflow: hidden;
	     background: #339;
	     margin: 3px 0;
	     clear: both;
       }
       .diasmes{
	    overflow: hidden;
       }
.diassemana span, .diasmes span{
	margin: 3px;
	width: 25px;
	display: block;
	float: left;
	text-align: center;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 0.875em;
}
.diassemana span{
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	height: 1.8em;
	line-height: 1.8em;
}
.diasmes span{
	background: #ddd;
}
.diasmes span.diainvalido{
	background: #aaa;
}
.diasmes span.domingo{
	color: #c00;
}
.capacalendario span.primero{
	margin-left:0 !important;
}
.capacalendario span.ultimo{
	margin-right:0 !important;
}
 
a.botoncal{
	margin-left: 5px;
	background: transparent url(calendario.png) no-repeat;
}
a.botoncal span{
	display: inline-table;
	width: 16px;
	height: 16px;
}
a.botonmessiguiente{
	float: right;
	background: transparent url(105.png) no-repeat;
	margin: 5px 5px 0 5px;
}
a.botonmessiguiente span, a.botonmesanterior span{
	display: inline-table;
	width: 10px;
	height: 10px;
}
a.botonmesanterior{
	float: left;
	background: transparent url(106.png) no-repeat;
	margin: 5px 5px 0 5px;
}
.textomesano{
	background-color: #dfd;
	overflow: hidden;
	padding: 2px;
	font-size: 0.8em;
	font-weight: bold;
	text-align: center
}
.mesyano{
	margin-top: 3px;
}
.capacerrar{
	background-color: #ddf;
	overflow: hidden;
	padding: 2px;
	font-size: 0.5em;
}
a.calencerrar{
	float: right;
	background: transparent url(101.png) no-repeat;
	margin: 2px 5px 0 5px;
}
a.calencerrar span{
	display: inline-table;
	width: 10px;
	height: 10px;
}

Código del script jCalendario.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
jQuery.fn.calendarioDW = function() {
   this.each(function(){
		//saber si estoy mostrando el calendario
		var mostrando = false;
		//variable con el calendario
		var calendario;
		//variable con los días del mes
		var capaDiasMes;
		//variable para mostrar el mes y ano que se está viendo
		var capaTextoMesAnoActual = $('<div class="visualmesano"></div>');
		//iniciales de los días de la semana
		var dias = ["l", "m", "x", "j", "v", "s", "d"];
		//nombres de los meses
		var nombresMes = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
 
		//elemento input
		var elem = $(this);
		//creo un enlace-botón para activar el calendario
		var boton = $("<a class='botoncal' href='#'><span></span></a>");
		//inserto el enlace-botón después del campo input
		elem.after(boton);
 
		//evento para clic en el botón
		boton.click(function(e){
			e.preventDefault();
			mostrarCalendario();
		});
		//evento para clic en el campo
		elem.click(function(e){
			this.blur();
			mostrarCalendario();
		});
 
		//función para mostrar el calendario
		function mostrarCalendario(){
			if(!mostrando){
				mostrando = true;
				//es que hay que mostrar el calendario
				//dias de la semana
				var capaDiasSemana = $('<div class="diassemana"></div>');
				$(dias).each(function(indice, valor){
					var codigoInsertar = '<span';
					if (indice==0){
						codigoInsertar += ' class="primero"';
					}
					if (indice==6){
						codigoInsertar += ' class="domingo ultimo"';
					}
					codigoInsertar += ">" + valor + '</span>';
 
					capaDiasSemana.append(codigoInsertar);
				});
 
				//capa con los días del mes
				capaDiasMes = $('<div class="diasmes"></div>');
 
				//un objeto de la clase date para calculo de fechas
				var objFecha = new Date();
				//miro si en el campo INPUT tengo alguna fecha escrita
				var textoFechaEscrita = elem.val();
				if (textoFechaEscrita!= ""){
					if (validarFechaEscrita(textoFechaEscrita)){
						var arrayFechaEscrita = textoFechaEscrita.split("/");
						//hago comprobación sobre si el año tiene dos cifras
						if(arrayFechaEscrita[2].length == 2){
							if (arrayFechaEscrita[2].charAt(0)=="0"){
								arrayFechaEscrita[2] = arrayFechaEscrita[2].substring(1);
							}
							arrayFechaEscrita[2] = parseInt(arrayFechaEscrita[2]);
							if (arrayFechaEscrita[2] < 50)
								arrayFechaEscrita[2] += 2000;
						}
						objFecha = new Date(arrayFechaEscrita[2], arrayFechaEscrita[1]-1, arrayFechaEscrita[0])
					}
				}
 
				//mes y año actuales
				var mes = objFecha.getMonth();
				var ano = objFecha.getFullYear();
				//muestro los días del mes y año dados
				muestraDiasMes(mes, ano);
 
				//control para ocultar el calendario
				var botonCerrar = $('<a href="#" class="calencerrar"><span></span></a>');
				botonCerrar.click(function(e){
					e.preventDefault();
					calendario.hide("slow");
				})
				var capaCerrar = $('<div class="capacerrar"></div>');
				capaCerrar.append(botonCerrar)
 
				//controles para ir al mes siguiente / anterior
				var botonMesSiguiente = $('<a href="#" class="botonmessiguiente"><span></span></a>');
				botonMesSiguiente.click(function(e){
					e.preventDefault();
					mes = (mes + 1) % 12;
					if (mes==0)
						ano++;
					capaDiasMes.empty();
					muestraDiasMes(mes, ano);
				})
				var botonMesAnterior = $('<a href="#" class="botonmesanterior"><span></span></a>');
				botonMesAnterior.click(function(e){
					e.preventDefault();
					mes = (mes - 1);
					if (mes==-1){
						ano--;
						mes = 11
					}
					capaDiasMes.empty();
					muestraDiasMes(mes, ano);
				})
				var botonCambioAno = $('<a href="#" class="botoncambiaano"><span></span></a>')
				botonCambioAno.click(function(e){
					e.preventDefault();
					var botonActivoSelAnos = $(this);
					//creo una capa con una serie de años para elegir
					var capaAnos = $('<div class="capaselanos"></div>');
					//genero 10 años antes y 10 después
					for (var i=ano-10; i<=ano+10; i++){
						var codigoEnlace = '<a href="#"';
						if (i==ano)
							codigoEnlace += ' class="seleccionado"';
						if (i==ano+10)
							codigoEnlace += ' class="ultimo"';
						codigoEnlace += '><span>' + i + '</span></a>';
						var opcionAno = $(codigoEnlace);
						opcionAno.click(function(e){
							e.preventDefault();
							ano = parseInt($(this).children().text());
							capaDiasMes.empty();
							muestraDiasMes(mes, ano);
							capaAnos.slideUp();
							capaAnos.detach();
						})
						capaAnos.append(opcionAno);
					}
					//coloco la capa en la página
					$(document.body).append(capaAnos);
					//posiciono la capa
					capaAnos.css({
						top: (botonActivoSelAnos.offset().top + 12) + "px",
						left: (botonActivoSelAnos.offset().left - 25) + "px"
					})
					capaAnos.slideDown();
				})
 
				//capa para mostrar el texto del mes y ano actual
				var capaTextoMesAno = $('<div class="textomesano"></div>');
				var capaTextoMesAnoControl = $('<div class="mesyano"></div>')
				capaTextoMesAno.append(botonMesSiguiente);
				capaTextoMesAno.append(botonMesAnterior);
				capaTextoMesAno.append(capaTextoMesAnoControl);
				capaTextoMesAnoControl.append(capaTextoMesAnoActual);
				capaTextoMesAnoControl.append(botonCambioAno);
 
				//calendario y el borde
				calendario = $('<div class="capacalendario"></div>');
				var calendarioBorde = $('<div class="capacalendarioborde"></div>');
				calendario.append(calendarioBorde);
				calendarioBorde.append(capaCerrar);
				calendarioBorde.append(capaTextoMesAno);
				calendarioBorde.append(capaDiasSemana);
				calendarioBorde.append(capaDiasMes);
 
				//inserto el calendario en el documento
				$(document.body).append(calendario);
				//lo posiciono con respecto al boton
				calendario.css({
					top: boton.offset().top + "px",
					left: (boton.offset().left + 20) + "px"
				})
				//muestro el calendario
				calendario.show("slow");
 
			}else{
				//es que el calendario ya se estaba mostrando...
				calendario.fadeOut("fast");
				calendario.fadeIn("fast");
 
			}
 
		}
 
		function muestraDiasMes(mes, ano){
			//console.log("muestro (mes, ano): ", mes, " ", ano)
			//muestro en la capaTextoMesAno el mes y ano que voy a dibujar
			capaTextoMesAnoActual.text(nombresMes[mes] + " " + ano);
 
			//muestro los días del mes
			var contadorDias = 1;
 
			//calculo la fecha del primer día de este mes
			var primerDia = calculaNumeroDiaSemana(1, mes, ano);
			//calculo el último día del mes
			var ultimoDiaMes = ultimoDia(mes,ano);
 
			//escribo la primera fila de la semana
			for (var i=0; i<7; i++){
				if (i < primerDia){
					//si el dia de la semana i es menor que el numero del primer dia de la semana no pongo nada en la celda
					var codigoDia = '<span class="diainvalido';
					if (i == 0)
						codigoDia += " primero";
					codigoDia += '"></span>';
				} else {
					var codigoDia = '<span';
					if (i == 0)
						codigoDia += ' class="primero"';
					if (i == 6)
						codigoDia += ' class="ultimo domingo"';
					codigoDia += '>' + contadorDias + '</span>';
					contadorDias++;
				}
				var diaActual = $(codigoDia);
				capaDiasMes.append(diaActual);
			}
 
			//recorro todos los demás días hasta el final del mes
			var diaActualSemana = 1;
			while (contadorDias <= ultimoDiaMes){
				var codigoDia = '<span';
				//si estamos a principio de la semana escribo la clase primero
				if (diaActualSemana % 7 == 1)
					codigoDia += ' class="primero"';
				//si estamos al final de la semana es domingo y ultimo dia
				if (diaActualSemana % 7 == 0)
					codigoDia += ' class="domingo ultimo"';
				codigoDia += '>' + contadorDias + '</span>';
				contadorDias++;
				diaActualSemana++;
				var diaActual = $(codigoDia);
				capaDiasMes.append(diaActual);
			}
 
			//compruebo que celdas me faltan por escribir vacias de la última semana del mes
			diaActualSemana--;
			if (diaActualSemana%7!=0){
				//console.log("dia actual semana ", diaActualSemana, " -- %7=", diaActualSemana%7)
				for (var i=(diaActualSemana%7)+1; i<=7; i++){
					var codigoDia = '<span class="diainvalido';
					if (i==7)
						codigoDia += ' ultimo'
					codigoDia += '"></span>';
					var diaActual = $(codigoDia);
					capaDiasMes.append(diaActual);
				}
			}
 
			//crear el evento para cuando se pulsa un día de mes
			//console.log(capaDiasMes.children());
			capaDiasMes.children().click(function(e){
				var numDiaPulsado = $(this).text();
				if (numDiaPulsado != ""){
					elem.val(numDiaPulsado + "/" + (mes+1) + "/" + ano);
					calendario.fadeOut();
				}
			})
		}
		//función para calcular el número de un día de la semana
		function calculaNumeroDiaSemana(dia,mes,ano){
			var objFecha = new Date(ano, mes, dia);
			var numDia = objFecha.getDay();
			if (numDia == 0)
				numDia = 6;
			else
				numDia--;
			return numDia;
		}
 
		//función para ver si una fecha es correcta
		function checkdate ( m, d, y ) {
			// función por http://kevin.vanzonneveld.net
			// extraida de las librerías phpjs.org manual en http://www.desarrolloweb.com/manuales/manual-librerias-phpjs.html
			return m > 0 && m < 13 && y > 0 && y < 32768 && d > 0 && d <= (new Date(y, m, 0)).getDate();
		}
 
		//funcion que devuelve el último día de un mes y año dados
		function ultimoDia(mes,ano){
			var ultimo_dia=28;
			while (checkdate(mes+1,ultimo_dia + 1,ano)){
			   ultimo_dia++;
			}
			return ultimo_dia;
		}
 
		function validarFechaEscrita(fecha){
			var arrayFecha = fecha.split("/");
			if (arrayFecha.length!=3)
				return false;
			return checkdate(arrayFecha[1], arrayFecha[0], arrayFecha[2]);
		}
   });
   return this;
};
 
$(document).ready(function(){
	$(".campofecha").calendarioDW();
})
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

Mostrar fecha en el orden año, mes y dia

Publicado por ScriptShow (489 intervenciones) el 21/05/2017 22:16:23
  • ScriptShow se encuentra ahora conectado en el
  • chat de PHP
Saludos Roberto,

no voy a analizar todo ese script. No obtante, la forma básica de fecha sería:

1
2
3
4
5
6
7
8
9
<script>
var today=new Date();
var dd=today.getDate();
var mm=today.getMonth()+1;
var yyyy=today.getFullYear();
if (mm<10){mm="0"+mm}
if (dd<10){dd="0"+dd}
document.write(yyyy+"/"+mm+"/"+dd);
</script>

Por si te sirve para cualquier alternativa, etc.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad