Dada una fecha, necesitamos cambiar el formato de la fecha usando moment.js. Para lograr esta funcionalidad, podemos usar la función moment().format() .
Función moment(): La función moment() se utiliza para crear un momento a partir de una string.
Sintaxis:
moment(String);
Parámetro: Acepta un String como parámetro
Valor devuelto: Devuelve el objeto de momento.
Función format(): La función moment().format() se usa para formatear la fecha. El formato se puede proporcionar en forma de string que se pasa como parámetro a este método.
Sintaxis:
moment().format(String);
Parámetros: Esta función acepta un único parámetro de tipo string, que define el formato.
Valor devuelto: esta función devuelve la fecha.
Enlaces CDN:
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”https://cdnjs.cloudflare. com/ajax/libs/moment.js/2.18.1/moment.min.js”></script>
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.0 .0/dist/css/bootstrap.min.css”>
Acercarse:
- En primer lugar, agregue el enlace CDN de jQuery, Moment.js y Bootstrap al script o descárguelos de su máquina local.
- Cree una entrada para la fecha y el botón para enviar.
- Ahora use el método moment() para convertir la fecha en un objeto de momento.
- Use el método format() para cambiar el formato de la fecha, a continuación se muestra la sintaxis para cambiar el formato de la fecha a ‘DD-MM-YYYY’.
moment($("#date_val").val()).format('DD-MM-YYYY');
- Agregue algo de estilo a la página usando el programa de arranque.
Fichas de formato para fechas:
| Simbólico | Descripción | Ejemplo |
| AAAA | año de 4 dígitos | 2022 |
| AA | año de 2 dígitos | 22 |
| MMMMM | Mes completo | Marzo |
| MMM | mes de 3 caracteres | Mar |
| milímetro | El mes del año, relleno con ceros | 03 |
| METRO | el mes del año | 3 |
| DD | Día del mes, relleno con ceros | 02 |
| D | Día del mes | 2 |
| Hacer | Día del mes con contracción ordinal numérica | 2do |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">
</script>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container row my-2 mx-auto">
<input type="date" data-provide="datepicker"
name="date" id="date_val">
<button type="button" id="datebtn"
class="btn btn-primary row ml-2">
Primary
</button>
</div>
<div class=" w-25">
<ul class="list-group">
<li class="list-group-item "> DD-MM-YYYY :
<span id="format1"
class="text-primary"></span>
</li>
<li class="list-group-item ">DD MMMM YYYY :
<span id="format2"
class="text-primary"></span>
</li>
<li class="list-group-item ">DD/MM/YYYY :
<span id="format3"
class="text-primary"></span>
</li>
</ul>
</div>
<script type="text/javascript">
$("#datebtn").click(function () {
var format1 = moment($("#date_val")
.val()).format('DD-MM-YYYY');
$("#format1").text(format1);
var format2 = moment($("#date_val")
.val()).format('DD MMMM YYYY');
$("#format2").text(format2);
var format3 = moment($("#date_val")
.val()).format('DD/MM/YYYY');
$("#format3").text(format3);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA