jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente y optimizado, independiente de la plataforma y ampliamente compatible. El jqxCalendar representa un widget de calendario jQuery que permite al usuario seleccionar una fecha usando una visualización de calendario mensual visual.
La propiedad titleFormat se usa para establecer o devolver el formato de título para la sección de título. Acepta valor de tipo array y su valor predeterminado es [“MMMM yyyy”, “yyyy”, “yyyy”].
Los valores posibles de la propiedad titleFormat son:
- ‘d’ – Representa el día del mes.
- ‘dd’ – Representa el día del mes.
- ‘ddd’ – Representa el nombre abreviado del día de la semana.
- ‘dddd’ – Representa el nombre completo del día de la semana.
- ‘h’ – Representa la hora usando un reloj de 12 horas del 1 al 12.
- ‘hh’ – Representa la hora usando un reloj de 12 horas de 01 a 12.
- ‘H’ – Representa la hora usando un reloj de 24 horas de 0 a 23.
- ‘HH’ – Representa la hora usando un reloj de 24 horas de 00 a 23.
- ‘m’ – Representa el minuto del 0 al 59.
- ‘mm’: representa los minutos del 00 al 59.
- ‘M’ – Representa el mes del 1 al 12.
- ‘MM’ – Representa el mes del 01 al 12.
- ‘MMM’ – Representa el nombre abreviado del mes.
- ‘MMMM’ – Representa el nombre completo del mes.
- ‘s’ – Representa el segundo, del 0 al 59.
- ‘ss’ – Representa el segundo, del 00 al 59.
- ‘t’: representa el primer carácter del designador AM/PM.
- ‘tt’: representa el designador AM/PM.
- ‘y’ – Representa el año, del 0 al 99.
- ‘yy’ – Representa el año, del 00 al 99.
- ‘yyy’ – Representa el año, con un mínimo de tres dígitos.
- ‘yyyy’: representa el año como un número de cuatro dígitos.
Sintaxis:
$('.selector').jqxCalendar({
titleFormat: Array
});
Archivos vinculados: descargue jQWidgets desde https://www.jqwidgets.com/download/link. En el archivo HTML, busque los archivos de script en la carpeta descargada:
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” /> <script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script> <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script> <script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”> </script> <script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script> <script type=”text/javascript” src=”jqwidgets/globalization/globalize.js”></ script> <script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
El siguiente ejemplo ilustra la propiedad jqxCalendar titleFormat en jQWidgets:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdatetimeinput.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcalendar.js">
</script>
<script type="text/javascript"
src="jqwidgets/globalization/globalize.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqx-all.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxCalendar titleFormat Property
</h3>
<div id='jqxcal'></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxcal").jqxCalendar({
width: '400px',
height: '300px',
titleFormat: "MMMM yy"
});
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcalendar/jquery-calendar-api.htm