MomentJS - Guia rápido

MomentJS é uma biblioteca JavaScript que ajuda a analisar, validar, manipular e exibir data / hora em JavaScript de uma forma muito fácil. Este capítulo fornecerá uma visão geral do MomentJS e discute seus recursos em detalhes.

O Moment JS permite exibir a data de acordo com a localização e em formato legível por humanos. Você pode usar o MomentJS dentro de um navegador usando o método de script. Ele também está disponível com Node.js e pode ser instalado usando npm.

No MomentJS, você pode encontrar muitos métodos fáceis de usar para adicionar, subtrair, validar data, obter a data máxima, mínima etc. É um projeto de código aberto e você pode contribuir facilmente para a biblioteca e adicionar recursos na forma de plug-ins e disponibilizá-lo no GitHub e no Node.js.

Características

Vamos entender em detalhes todos os recursos importantes disponíveis no MomentJS -

Análise

A análise permite que você analise a data no formato necessário. A análise de data está disponível em string, objeto e array. Ele permite que você clone o momento usando moment.clone. Existem métodos disponíveis que fornecem a saída de data no formato UTC.

Validação de Data

A validação de data é muito fácil com MomentJS. Você pode usar o métodoisValid()e verifique se a data é válida ou não. O MomentJS também fornece muitos sinalizadores de análise que podem ser usados para verificar a validação de data.

Manipulação

Existem vários métodos para manipular Data e Hora no objeto de momento. add, subtract, startoftime, endoftime, local, utc, utcoffset etc., são os métodos disponíveis que fornecem detalhes necessários sobre data / hora no MomentJS.

Prepare-se

Get / Set permite ler e definir as unidades na data. Permite alterar e ler horas, minutos, segundos, milissegundos, data do mês, dia da semana, dia do ano, semana do ano, mês, ano, trimestre, ano da semana, semanas do ano, obter / definir, máximo , mínimo etc. Get / Set é um recurso muito útil disponível no MomentJS.

Exibição

Display fornece formatos para exibir a data de maneiras diferentes. Existem métodos disponíveis que informam o tempo a partir de um determinado momento, a partir do momento atual, a diferença entre dois momentos etc. Permite exibir a data no formato JSON, Array, Object, String etc.

Consultas de data

Date Queries tem métodos fáceis de usar que informam se a data é maior ou menor do que a entrada, entre as datas fornecidas, é um ano bissexto, é um momento, é uma data etc. É muito útil com validação de data.

Durações

As durações são uma das características importantes do MomentJS. Basicamente, trata a duração do tempo para determinadas unidades. ohumanize método disponível exibe a data em um formato legível por humanos.

Internacionalização

A internacionalização é outro recurso importante do MomentJS. Você pode exibir a data e a hora com base no local. O local pode ser aplicado a um momento específico, se necessário. Você obterá um arquivo reduzido do site inicial do MomentJS que contém todos os locais. No caso de estar lidando com um local específico, você também pode adicionar apenas esse arquivo de localidade e trabalhar com ele. Os nomes de meses, semanas e dias são exibidos no local especificado.

Costumização

O MomentJS permite a personalização para o local criado. Você pode personalizar os nomes dos meses, abreviações dos meses, nomes dos dias da semana, abreviações dos dias da semana, formato de data longo e formato de calendário para um local definido de acordo com seus requisitos.

Serviços de utilidade pública

Os utilitários vêm com dois métodos: normalize units e invalid. Eles são usados com o momento e nos ajudam a alterar ou personalizar a saída conforme precisamos. Ele também permite definir nossa própria validação personalizada no objeto de momento.

Plugins

Plugins são recursos adicionais do MomentJS. Existem muitos plug-ins adicionados a calendários, formato de data, análise, intervalos de datas, intervalo preciso, etc. Você pode adicionar seus próprios plug-ins e disponibilizá-los com Node.js e GitHub.

Neste capítulo, você aprenderá em detalhes sobre como configurar o ambiente de trabalho do MomentJS em seu computador local. Antes de começar a trabalhar no MomentJS, você precisa ter acesso à biblioteca. Você pode acessar seus arquivos em qualquer um dos seguintes métodos -

Método 1: usando o arquivo MomentJS no navegador

Neste método, vamos precisar do arquivo MomentJS de seu site oficial e usá-lo diretamente no navegador.

Passo 1

Como primeiro passo, acesse o site oficial do MomentJS https://momentjs.comVocê encontrará a página inicial conforme mostrado aqui -

Observe que há uma opção de download disponível que fornece o arquivo MomentJS mais recente disponível. Observe que o arquivo está disponível com e sem minificação.

Passo 2

Agora, inclua moment.js dentro de scriptmarcar e começar a trabalhar com o MomentJS. Para isso, você pode usar o código fornecido abaixo -

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

Aqui está um exemplo de trabalho e sua saída para uma melhor compreensão -

Exemplo

<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

Resultado

o moment-localearquivo para trabalhar com diferentes localidades também está disponível, conforme mostrado na imagem acima. Agora, adicione o arquivo à tag de script conforme mostrado abaixo e trabalhe com diferentes localidades de sua escolha. Para isso, você pode usar o código fornecido abaixo -

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

Aqui está um exemplo de trabalho para o local do momento e sua saída para uma melhor compreensão -

<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

Resultado

Método 2: usando Node.js

Se você está optando por este método, certifique-se de ter Node.js e npminstalado em seu sistema. Você pode usar o seguinte comando para instalar o MomentJS -

npm install moment

Você pode observar a seguinte saída quando o MomentJS for instalado com sucesso -

Agora, para testar se MomentJS funciona bem com Node.js, crie o arquivo test.js e adicione o seguinte código a ele -

var moment = require('moment');
var a = moment().toString();
console.log(a);

Agora, no prompt de comando, execute o nó de comando test.js conforme mostrado na captura de tela fornecida abaixo -

Observe que este comando exibe a saída para moment().toString().

Método 3: usando o Bower

Bower é outro método para obter os arquivos necessários para o MomentJS. Você pode usar o seguinte comando para instalar o MomentJS usando o Bower -

bower install --save moment

A imagem abaixo mostra a instalação do MomentJS usando Bower -

Estes são os arquivos carregados do Bower para o MomentJS instalar. O momento instalado e os arquivos de local são mostrados na imagem abaixo -

Neste capítulo, discutiremos como trabalhar com MomentJS using RequireJS e MomentJS and TypeScript.

MomentJS e RequireJS

Para entender o funcionamento do MomentJS usando RequireJS, vamos analisar um exemplo de trabalho com MomentJS e RequireJS. A estrutura de pastas do aplicativo correspondente é mostrada na imagem a seguir -

Você pode obter o arquivo require.js buscado no site oficial do RequireJS -https://requirejs.org/docs/download.html. Observe o seguinte código para um melhor entendimento -

Exemplo project.html

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS and MomentJS</title>
      <!-- data-main attribute tells require.js to load
         scripts/main.js after require.js loads. -->
      <script data-main="scripts/main" src="scripts/require.js"></script>
   </head>
   <body>
      <h1>RequireJS and MomentJS</h1>
      <div id="datedisplay" style="font-size:25px;"></div>
   </body>
</html>

main.js

require.config({
   paths:{
      'momentlocale':'libs/momentlocale',
   },
});
require(['momentlocale'], function (moment) {
   moment.locale('fr');
   var a = moment().format("LLLL");
   document.getElementById("datedisplay").innerHTML = a;
});

Observe que Moment.js e momentlocale.js estão na pasta libs.

A seguir está a saída para project.html que você observará no navegador -

MomentJS e TypeScript

O código usado para construir o projeto MomentJS e Typescript são os dados abaixo -

package.json

{
   "name": "momenttypescript",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "browserify": "^16.2.0",
      "gulp": "^3.9.1",
      "gulp-connect": "^5.5.0",
      "gulp-typescript": "^4.0.2",
      "moment": "^2.22.1",
      "tsify": "^4.0.0",
      "typescript": "^2.8.3",
      "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

Observe que as dependências disponíveis em package,json precisa ser instalado usando npm install.

main.ts

import * as moment from 'moment';
let now = moment().format('LLLL');
document.getElementById("datedisplay").innerHTML = now;

Você precisa use Gulp para construir o arquivo de texto digitado para JavaScript, ou seja, de main.ts para main.js. O código a seguir mostra ogulpfile.js que é usado para construir o arquivo. Observe que usamosgulp-connect pacote que abre um servidor local para exibir a saída.

gulpfile.js

var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var tsify = require("tsify");
var source = require("vinyl-source-stream");
gulp.task("build", function (cb) {
   runSequence("browserify", "minify", cb);
});
gulp.task("startserver", ["browserify", "connect"]);
gulp.task("browserify", function () {
var b = browserify({
   insertGlobals: true,
   debug: false
}) .add("src/main.ts") .plugin(tsify, { typescript: require("typescript") });
return b
   .bundle()
   .pipe(source("main.js"))
   .pipe(gulp.dest("build/"));
});
gulp.task("connect", function () {
   connect.server({
      root: ".",
      // port: '80',
      livereload: true
   });
});

Esta é a saída que você observa ao executar o código fornecido acima -

Você pode ver a estrutura da pasta conforme mostrado no seguinte formato -

O código para index.html é mostrado abaixo -

<html>
   <head></head>
   <body>
      <h1>MomentJS and typescript</h1>
      <div id="datedisplay" style="font-size:30px;"></div>
      <script src="build/main.js"></script>
   </body>
</html>

Agora, se você abrir http://localhost:8080/, você pode ver a saída conforme mostrado abaixo -

O MomentJS tem muitos métodos fáceis de usar que ajudam na análise de data e hora. Ele pode analisar datas na forma de objeto, string, array, objeto de data nativo JavaScript etc. Este capítulo os discute em detalhes.

Data de Análise

MomentJS fornece um objeto wrapper como saída quando moment()é chamado. Você pode observar o seguinte ao consolar a saída no navegador.

MomentJS fornece vários métodos para analisar a data conforme listado abaixo -

Sr. Não.	Método e Sintaxe
1	Agora momento()
2	Corda momento (corda)
3	Objeto momento (objeto)
4	Encontro momento (data)
5	Array momento (Array [])
6	Unix Timestamp momento (número)
7	Clone de momento momento (momento)
8	UTC moment.utc ()
9	parseZone moment.parseZone ()
10	Dados de Criação moment (). creationData ();
11	Padrões var m = momento ({hora: 3, minuto: 40, segundos: 10});

MomentJSlida com a validação de data de uma maneira fácil. Você não precisa escrever muito código para validar a data.isValid()é o método disponível no momento que informa se a data é válida ou não. O MomentJS também fornece muitos sinalizadores de análise que podem ser usados para verificar a validação de data.

Parsing Flags

MomentJS fornece os seguintes sinalizadores de análise nos casos em que a data fornecida é considerada inválida -

overflow - Isso ocorrerá quando o mês fornecido for 13, o dia 367 em um ano ou 32 em um mês, 29 em fevereiro em um ano não bissexto etc. O estouro contém o índice da unidade inválida para corresponder a invalidAt. Observe que-1 significa nenhum estouro.

invalidMonth- Mostra um nome de mês inválido. Ele fornecerá a string de mês inválida ou nula.

Empty- Quando uma entrada é fornecida que não é uma data. Isso dá um booleano.

nullInput - Uma entrada nula, como momento (nulo); retorna um booleano.

invalidFormat - Quando o formato fornecido está vazio, como moment('2018-04-25', []). Ele dá uma volta booleana.

userInvalidated - Uma data criada explicitamente como inválida, como moment.invalid(). Ele retorna Boolean.

meridiem- Indica o meridiem (AM / PM) analisado, se houver. Ele retorna uma string.

parsedDateParts - Ele retorna uma matriz de partes de datas analisadas, como parsedDateParts[0] como ano, parsedDateParts[1] como mês e parsedDateParts[2]como dia. Se nenhuma parte estiver presente, mas meridiem tiver valor, a data é inválida. Ele retorna uma matriz.

Considere o seguinte exemplo para entender a validação de data -

var a = moment("2018-18-10T10:20:25");
a.isValid();
a.invalidAt();

Resultado

O invalidAt fornece a saída como 1, que aponta para o mês como o valor do mês é maior que 12 e estourou. Se houver um estouro, invalidAt fornecerá a saída conforme mostrado na tabela fornecida aqui -

0	anos
1	meses
2	dias
3	horas
4	minutos
5	segundos
6	milissegundos

Se houver vários estouros na data fornecida, será uma saída para o primeiro índice estourado.

O MomentJS possui muitos métodos para obter / definir as entradas de data. Get nos permitirá ler a unidade de entrada necessária e set permitirá modificar a unidade de entrada. Este capítulo discute em detalhes os métodos get / set a serem usados no momento.

A tabela a seguir mostra os métodos get / set disponíveis -

Método	Sintaxe
Milissegundo	momento (). milissegundo (número) momento (). milissegundos (); momento (). milissegundos (número); momento (). milissegundos ();
Segundo	momento (). segundo (número); momento (). segundo (); momento (). segundos (número); momento (). segundos ();
Minuto	momento (). minuto (número); momento (). minuto (); momento (). minutos (número); momento (). minutos ();
Hora	momento (). data (número); momento (). data (); momento (). datas (número); momento (). datas ();
Dia da semana	moment (). day (Number \| String); momento (). dia (); momento (). dias (Número \| String); momento (). dias ();
Data do Mês	momento (). data (número); momento (). data (); momento (). datas (número); momento (). datas ();
Dia do ano	moment (). dayOfYear (Number); momento (). dayOfYear ();
Semana do ano	momento (). semana (número); momento (). semana (); momento (). semanas (número); momento (). semanas ();
Semana do ano (ISO)	moment (). isoWeek (número); momento (). isoWeek (); moment (). isoWeeks (número); momento (). isoWeeks ();
Mês	momento (). mês (Número \| String); momento (). mês ();
Trimestre	momento (). quarto (); momento (). trimestre (número); momento (). quartos (); momento (). quartos (número);
Ano	momento (). ano (número); momento (). ano ();
Week year	momento (). semanaAno (Número); momento (). semanaAno ();
Weeks in year	momento (). semanasNo ano ();
Pegue	moment (). get ('ano'); moment (). get ('mês'); moment (). get ('date'); moment (). get ('hora'); moment (). get ('minuto'); moment (). get ('second'); moment (). get ('milissegundo');
Conjunto	moment (). set (String, Int); moment (). set (Object (String, Int));
Máximo	moment.max (Momento [, Momento ...]); moment.max (Momento []);
Mínimo	moment.min (Momento [, Momento ...]); moment.min (Momento []);

MomentJSfornece vários métodos para manipular Data e Hora no objeto de momento. Este capítulo trata de todos esses métodos em detalhes.

Métodos para manipular data e hora

A tabela a seguir mostra os métodos disponíveis no MomentJS que ajuda a manipular a data e hora conforme necessário -

Sr. Não.	Método e Sintaxe
1	Adicionar moment.add ()
2	Subtrair moment.subtract ()
3	Início do Tempo moment.startof ()
4	Fim do tempo moment.endof ()
5	Local moment.local ()
6	UTC moment.utc ()
7	Deslocamento UTC moment.utcOffset ()

O MomentJS fornece formatos para exibir datas de maneiras diferentes. Existem métodos disponíveis que informam a hora a partir de um determinado momento, a partir do momento atual, a diferença entre dois momentos, etc. Pode exibir a data no formato JSON, Array, Object, String etc.

Métodos para formatar data e hora

A tabela a seguir mostra uma lista de métodos disponíveis que ajudam na exibição / formatação da data conforme necessário.

Método	Sintaxe
Formato	momento (). formato (); moment (). format (String);
Tempo a partir de agora	momento (). de Agora (); moment (). fromNow (booleano);
Hora de X	momento (). from (Moment \| String \| Number \| Date \| Array);
Hora de agora	momento (). toNow (); moment (). toNow (booleano);
Hora de X	moment (). to (Moment \| String \| Number \| Date \| Array); moment (). to (Moment \| String \| Number \| Date \| Array, Boolean);
Tempo do calendário	momento (). calendário (); moment (). calendar (referenceTime); moment (). calendar (referenceTime, formatos);
Diferença	moment (). diff (Moment \| String \| Number \| Date \| Array); moment (). diff (Moment \| String \| Number \| Date \| Array, String); moment (). diff (Moment \| String \| Number \| Date \| Array, String, Boolean);
Unix Timestamp (milissegundos)	momento (). valorOf (); + momento ();
Timestamp Unix (segundos)	momento (). unix ();
Dias do mês	moment (). daysInMonth ();
Como data de JavaScript	moment (). toDate ();
As Array	momento (). toArray ();
Como JSON	momento (). toJSON ();
Como string ISO 8601	momento (). toISOString (); moment (). toISOString (keepOffset);
Como objeto	momento (). toObject ();
Como corda	moment (). toString ();
Inspecionar	momento (). inspecionar ();

MomentJS fornece métodos para consultar a data / hora para ano bissexto, comparação de datas, validação de datas, etc. Este capítulo os discute em detalhes.

Métodos para consultar a data no MomentJS

A tabela a seguir mostra os métodos disponíveis no MomentJS e sua sintaxe para consulta de data -

Método	Sintaxe
É antes	moment (). isBefore (Moment \| String \| Number \| Date \| Array); moment (). isBefore (Moment \| String \| Number \| Date \| Array, String);
É igual	moment (). isSame (Moment \| String \| Number \| Date \| Array); moment (). isSame (Moment \| String \| Number \| Date \| Array, String);
É depois	moment (). isAfter (Moment \| String \| Number \| Date \| Array); moment (). isAfter (Moment \| String \| Number \| Date \| Array, String);
É o mesmo ou antes	moment (). isSameOrBefore (Moment \| String \| Number \| Date \| Array); moment (). isSameOrBefore (Moment \| String \| Number \| Date \| Array, String);
É o mesmo ou depois	moment (). isSameOrAfter (Moment \| String \| Number \| Date \| Array); moment (). isSameOrAfter (Moment \| String \| Number \| Date \| Array, String);
Está entre	moment (). isBetween (como momento, como momento); moment (). isBetween (como momento, como momento, String);
É hora de verão	momento (). isDST ();
É o ano bissexto	moment (). isLeapYear ();
É um momento	moment.isMoment (obj);
É um encontro	moment.isDate (obj);

A internacionalização é um dos recursos importantes do MomentJS. Você pode exibir a Data e a Hora com base na localização, ou seja, com base no país / região. O local pode ser aplicado a um momento específico, se necessário.

Este capítulo discute em detalhes sobre como fazer aplicar localidade globalmente, localmente, trabalhar com localidade usando Node.js, no navegador, obter as unidades (meses, dias da semana etc.) na localidade necessária etc.

Sr. Não.	Local e descrição
1	Localidade global Podemos atribuir localidade globalmente e todos os detalhes de data / hora estarão disponíveis na localidade atribuída.
2	Mudança de localidade localmente Precisamos de localidade para aplicar localmente no caso de precisarmos lidar com muitas localidades em um aplicativo.
3	Usando Locale no navegador Podemos começar a trabalhar com a localidade incluindo o arquivo local na tag de script.
4	Usando Locale usando Node.js Se acontecer de você usar o Node.js, você já terá os arquivos de localidade no momento quando fizer o npm install moment.
5	momentjs_Listando detalhes de data / hora da localidade atual Você pode definir a localidade e verificar os detalhes como meses, dias da semana, etc.
6	Verificando a localidade atual Podemos verificar o local atual usando moment.locale ().
7	Acessando a funcionalidade específica do local Aqui você verá os métodos e propriedades disponíveis no local carregado atualmente.

MomentJSpermite adicionar personalização ao local criado. Este capítulo os discute em detalhes.

A lista a seguir mostra as personalizações possíveis na localização -

Sr. Não.	Localização e descrição
1	Nomes dos meses Você pode adicionar nomes de meses à personalização do local.
2	Abreviatura do mês Este método ajuda a personalizar as abreviações dos meses.
3	Nomes de dias da semana Este método ajuda a personalizar os nomes dos dias da semana de acordo com o local.
4	Abreviatura do dia da semana Este método ajuda a personalizar as abreviações dos dias da semana com base no conjunto de localidade.
5	Abreviação mínima do dia da semana Este método ajuda a personalizar as abreviações de dias da semana mínimos com base no conjunto de localidade.
6	Formatos de data longos Este método ajuda a customizar o formato longdate para uma localidade.
7	Tempo Relativo Este método auxilia na obtenção do tempo relativo.
8	MANHÃ TARDE Este método ajuda a personalizar o meridiem de acordo com o local.
9	Análise AM / PM Você pode analisar AM / PM usando este método.
10	Calendário Isso ajuda a personalizar o objeto de calendário para um conjunto de localidade.
11	Ordinal A exibição ordinal de datas pode ser alterada com base no local.
12	Limites de tempo relativo Isso é usado com duration.humanize onde a duração é exibida como um few seconds ago, in a minute, an hour ago etc.

O MomentJS fornece um recurso importante chamado durações, que controla a duração de tempo para determinadas unidades. Neste capítulo, você aprenderá isso em detalhes.

Métodos disponíveis com durações

A tabela a seguir mostra os métodos disponíveis com duração para diferentes unidades a serem usadas com duração de momento -

Método	Sintaxe
Criando	moment.duration (número, string); moment.duration (número); moment.duration (Object); moment.duration (String);
Clone	moment.duração (). clone ();
Humanizar	moment.duração (). humanizar ();
Milissegundos	moment.duration (). milissegundos (); moment.duration (). asMilliseconds ();
Segundos	moment.duração (). segundos (); moment.duration (). asSeconds ();
Minutos	moment.duração (). minutos (); moment.duration (). asMinutes ();
Horas	momento.duração (). horas (); moment.duration (). asHours ();
Dias	momento.duração (). dias (); moment.duration (). asDays ();
Semanas	moment.duração (). semanas (); moment.duration (). asWeeks ();
Meses	moment.duração (). meses (); moment.duration (). asMonths ();
Years	moment.duração (). anos (); moment.duration (). asYears ();
Tempo extra	moment.duration (). add (Number, String); moment.duration (). add (Number); moment.duration (). add (Duração); moment.duration (). add (Object);
Subtrair tempo	moment.duration (). subtract (Number, String); moment.duração (). subtrair (Número); moment.duração (). subtrair (Duração); moment.duration (). subtract (Object);
Usando duração com Diff	var duration = moment.duration (x.diff (y))
Como unidade de tempo	moment.duration (). as (String);
Obter Unidade de Tempo	duration.get ('horas'); duration.get ('minutos'); duration.get ('segundos'); duration.get ('milissegundos');
Como JSON	moment.duration (). toJSON ();
É uma duração	moment.isDuration (obj);
Como string ISO 8601	moment.duration (). toISOString ();
Localidade	moment.duration (). locale (); moment.duration (). locale (String);

No MomentJS, você pode alterar ou personalizar a saída de acordo com o requisito usando unidades de normalização e métodos inválidos. Você também pode definir sua própria validação personalizada no objeto de momento.

Observe a tabela a seguir para obter mais informações -

Sr. Não.	Método e Sintaxe
1	Normalizar unidades moment.normalizeUnits (String);
2	Inválido moment.invalid (Object);

Plugins são recursos estendidos adicionados ao MomentJS. MomentJS é um projeto de código aberto e muitos plug-ins são encontrados no MomentJS que são contribuídos por seus usuários e estão disponíveis usando Node.js e GitHub.

Este capítulo discute alguns dos plug-ins de calendários e plug-ins de formatos de data disponíveis no MomentJS.

Plug-ins do calendário

Esta seção discute dois tipos de plug-ins do Agenda: ISO calendar and Taiwan calendar.

Calendário ISO

Você pode usar o seguinte comando para instalá-lo com Node.js -

npm install moment-isocalendar

Você pode obter o momento-isocalendar.js no GitHub - https://github.com/fusionbox/moment-isocalendar Observe o seguinte exemplo de trabalho com isocalendar e MomentJS -

Example

var m = moment().isocalendar();

Output

Example

var m = moment.fromIsocalendar([2018, 51, 10, 670]).format('LLLL');

Output

Calendário de Taiwan

Você pode usar o seguinte comando para instalá-lo com Node.js -

npm install moment-jalaali

Você pode obter o moment-taiwan.js no GitHub - https://github.com/bradwoo8621/moment-taiwan Observe o seguinte exemplo de trabalho com isocalendar e MomentJS -

Example

var m = moment('190/01/01', 'tYY/MM/DD');
var c = m.twYear();

Output

Plugins de formatos de data

Esta seção discute os seguintes tipos de plug-ins de formato de data -

Analisador de formato de data Java
Formatador de data curta
Analisar formato de data
Formato de duração
Intervalo de datas
Alcance preciso

Java DateFormat Parser

Você pode usar o seguinte comando para instalá-lo com Node.js -

Você pode obter o moment-jdateformatparser.js no GitHub - https://github.com/MadMG/moment-jdateformatparser Observe o seguinte exemplo de trabalho para moment-jdateformatparser e MomentJS -

Example

var m = moment().formatWithJDF("dd.MM.yyyy");

Output

Formatador de data curta

O arquivo JavaScript para shortdateformat pode ser obtido no GitHub -

https://github.com/researchgate/moment-shortformat

Syntax

moment().short();

A exibição é semelhante à mostrada na tabela aqui -

De momento	A partir do momento (). Curto ()
0 a 59 segundos	0 a 59 s
1 a 59 minutos	1 a 59 m
1 a 23 horas	1h às 23h
1 a 6 dias	1d a 6d
> = 7 dias e mesmo ano	A exibição será como 3 de fevereiro, 6 de março
> = 7 dias e ano diferente	A exibição será como 3 de fevereiro de 2018, 6 de março de 2018

Você pode pegar o script por um momento no link do GitHub fornecido acima.

Example

var a = moment().subtract(8, 'hours').short();
var b = moment().add(1, 'hour').short(true);

Output

Se você quiser remover o sufixo ago ou in, você pode passar de verdadeiro para curto (tru.

Analisar formato de data

Você pode usar o seguinte comando para instalá-lo com Node.js -

npm install moment-parseformat

Example

var a = moment.parseFormat('Friday 2018 27 april 10:28:10');

Output

Observe que a saída mostra que quaisquer parâmetros (data / hora) fornecidos ao parseFormat, ele fornece o formato da data conforme mostrado acima.

Formato de Duração

Você pode usar o seguinte comando para instalar o formato de duração no Node.js -

O repositório para formato de duração está disponível aqui - https://github.com/jsmreese/moment-duration-format Vejamos um exemplo prático com formato de duração -

Example

var a = moment.duration(969, "minutes").format("h:mm:ss");

Output

Isso adiciona mais detalhes à duração do momento criado.

Intervalo de datas

Você pode usar o seguinte comando para instalar o intervalo de datas no Node.js -

npm install moment-range

Example

window['moment-range'].extendMoment(moment);
var start = new Date(2012, 0, 15);
var end = new Date(2012, 4, 23);
var range = moment.range(start, end);
console.log(range.start._d);
console.log(range.end._d);

Output

Alcance preciso

O intervalo preciso exibirá a diferença de data exata em data, hora e em formato legível por humanos. Você pode usar o seguinte comando para instalar um intervalo preciso no Node.js -

npm install moment-precise-range-plugin

Example

var a = moment("1998-01-01 09:00:00").preciseDiff("2011-03-04 18:05:06");

Output

Até agora, aprendemos muitos conceitos no MomentJS. Este capítulo fornece mais exemplos para uma melhor compreensão.

Exibir intervalo de datas entre duas datas

Este é um exemplo que exibe as datas entre duas datas fornecidas.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
      table, td {
         border: 1px solid #F1E8E8;
         border-collapse: collapse;
         padding: 4px;
      }
      table tr:nth-child(odd) {
         background-color: #CFCACA;
      }
      table tr:nth-child(even) {
         background-color: #C4B4B4;
      }
      </style>
   </head>
   
   <body>
      <h1>Dates display between 2014-05-01 and 2014-05-16</h1>
      <div id="container">
         <table id="datedetails" ></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
               var next = moment(start).add(1, 'd');
               arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-05-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

Queremos exibir todas as datas entre 2014-05-01 para 2014-05-16. Usamos consulta de dataisSameOrAfter, date addition and date format para alcançar o que queremos.

Resultado

Exibir domingos entre 01/05/2014 e 16/08/2014

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <h1>Sundays between 2014-05-01 and 2014-08-16</h1>
      <div id="container">
         <table id="datedetails"></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) {
                  if (moment(start).format("dddd") === "Sunday") {
                     arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
                  }
               }
               var next = moment(start).add(1, 'd');
               if (moment(next).format("dddd") === "Sunday") {
                  arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               }
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-08-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

Resultado

Exibir detalhes da data de acordo com o local

Aqui, estamos usando o script moment.locale que possui todos os locais.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <script type="text/JavaScript" src="momentlocale.js" charset="UTF-8"></script>
      <style type="text/css">
         div {
            margin-top: 16px!important;
            margin-bottom: 16px!important;
            width:100%;
         }
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <div >
         Select Locale : <select id="locale" onchange="updatelocale()" style="width:200px;">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="fr-ca">French Canada</option>
            <option value="cs">Czech</option>
            <option value="zh-cn">Chinese</option>
            <option value="nl">Dutch<   /option>
            <option value="ka">Georgian</option>
            <option value="he">Hebrew</option>
            <option value="hi">Hindi</option>
            <option value="id">Indonesian</option>
            <option value="it">Italian</option>
            <option value="jv";Japanese</option>
            <option value="ko";Korean</option>
         </select>
      </div>
      <br/>
      <br/>>
      Display Date is different formats as per locale :<span id="localeid"></span><br/>
      <div>
         <table>
            <tr>
               <th>Format</th>
               <th>Display</th>
            </tr>
            <tr>
               <td><i>dddd, MMMM Do YYYY, h:mm:ss a</i></td>
               <td>
                  <div id="ldate"></div>
               </td>
            </tr>
            <tr>
               <td><i>LLLL</i></td>
               <td>
                  <div id="ldate1"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().format()</i></td>
               <td>
                  <div id="ldate2"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().calendar()</i></td>
               <td>
                  <div id="ldate3"></div>
               </td>
            </tr>
            <tr>
               <td><i>Months</i></td>
               <td>
                  <div id="ldate4"></div>
               </td>
            </tr>
            <tr>
               <td><i>Weekdays</i></td>
               <td>
                  <div id="ldate5"></div>
               </td>
            </tr>
         </table>
      </div>
      <script type="text/JavaScript">
         var updatelocale = function() {
            var a = moment.locale(document.getElementById("locale").value);
            var k = moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
            var k1 = moment().format("LLLL");
            var k2 = moment().format();
            var k3 = moment().calendar();
            var k4 = moment.months();
            var k5 = moment.weekdays();
            document.getElementById("localeid").innerHTML = "<b>"+a+"</b>";
            document.getElementById("ldate").innerHTML = k;
            document.getElementById("ldate1").innerHTML = k1;
            document.getElementById("ldate2").innerHTML = k2;
            document.getElementById("ldate3").innerHTML = k3;
            document.getElementById("ldate4").innerHTML = k4;
            document.getElementById("ldate5").innerHTML = k5;
         };
         updatelocale();
      </script>
   </body>
</html>

Produto 1

Produto 2

Produto 3

Produto 4

↰ Previous page