0

Estou precisando pegar a data atual e formatá-la do seguinte tipo:

17 de dezembro de 2018

Estou utilizando a data dentro de um projeto em Vue.

Única referência que encontrei foi esta porém está em javascript puro.

Alguém já precisou fazer algo assim em Vue?

1
  • 1
    O Vue é apenas um Lib pra criar componentes. Toda a parte de Javascript deve ser desenvolvida por você. Logo esse código em JS vai funcionar ;) 28/01/2019 às 18:07

2 Respostas 2

10

Não entendi porque não pode ser em javascript puro. Afinal, Vue.JS também é em javascript puro, é só usar o código no framework.


Você pode criar um array com o nome dos meses e pegar o nome correto usando o resultado de Date.getMonth() como índice.

function formatDate(date) {
  let dia = date.getDate()
  let mes = [
    'janeiro', 'fevereiro', 'março', 'abril',
    'maio', 'junho', 'julho', 'agosto', 'setembro', 
    'outubro', 'novembro', 'dezembro'
  ][date.getMonth()]
  let ano = date.getFullYear()
  
  return `${dia} de ${mes} de ${ano}`
}

let hoje = new Date()

console.log(formatDate(hoje))


Se a compatibilidade de browser não for um problema, você pode usar o método Date.toLocaleDateString() e configurar para que a saída seja a que você quer:

let hoje = new Date()
let data_formatada = hoje.toLocaleDateString('pt-BR', {
  day: 'numeric',
  month: 'long',
  year: 'numeric'
})

console.log(data_formatada)


Você pode usar a lógica acima no Vue como bem entender.

function formatDate(date) {
  let dia = date.getDate()
  let mes = [
    'janeiro', 'fevereiro', 'março', 'abril',
    'maio', 'junho', 'julho', 'agosto', 'setembro', 
    'outubro', 'novembro', 'dezembro'
  ][date.getMonth()]
  let ano = date.getFullYear()
  
  return `${dia} de ${mes} de ${ano}`
}

let formatter = new Intl.DateTimeFormat('pt-BR', {
  day: 'numeric',
  month: 'long',
  year: 'numeric'
})

new Vue({
  el: '#app',
  data:{
    hoje: new Date()
  },
  filters: {
    date: formatDate,
    date_2: formatter.format
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{ hoje | date }} <br>
  {{ hoje | date_2 }}
</div>

2

Para trabalhar com datas no Javascript acredito que a melhor opção é o Moment.

Importa ele, depois para fazer o que você precisa basta um.

moment().format('LL');

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .