Display default date field BR yyyymmdd to dd/mm/yyyy with javascript

Asked

Viewed 1,125 times

3

hello i have a field that automatically receives a date from another system, but it sends me in American pattern, I would display on the screen with the default dd/mm/yyyy;

 <div class="form-group col-md-2">
            <label for="proximoVenc">Data Ultimo Vencimento</label>
            <input type="text" class="form-control" name="proximoVenc" id="proximoVenc" value="20181105">
          </div>

javascript html date

  • Can you explain better "automatically receives a date from another system"?

  • That link has what you need

2 answers

4


You can treat this as a string, or convert to Date and show with country rules.

treating as string:

var formatoBr = '2020/05/10'.split('/').reverse().join('/');
console.log(formatoBr); // 10/05/2020

To convert and treat as Date you can do so:

var [ano, mes, dia] = '2020/05/10'.split('/').map(Number);
var date = new Date(ano, mes - 1, dia);
var formatoBr = date.toLocaleDateString('pt-BR');
console.log(formatoBr); // 10/05/2020

// ou ainda:
console.log(date.toLocaleDateString('pt-BR', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})); // domingo, 10 de maio de 2020

If you always have 8 digits without separators as you indicated now in the question you can ask N different ways... a suggestion may be:

var formatoUS = '20200510';
var [ano, mes, dia] = formatoUS.match(/(\d{4})(\d{2})(\d{2})/).slice(1);
var formatoBr = [dia, mes, ano].join('/');
console.log(formatoBr); // 10/05/2020

You can also use the type="date" in the input, but in this case there are more limitations to formatting, because you trust the browser with the task of training.

  • I’m sorry, but I actually get the date without "/" enough for me 20181105 and I need it to appear 11/05/2018

  • @Rapha this change in the question is very important and makes my answer wrong... Do you always have 8 digits on the date? or there are cases where the month or date has only 1 digit?

  • Always 8 digits

  • 1

    @Rapha added a suggestion for this variant.

3

Using pure Javascript, you can use the response of Sergio, but using substring instead of split:

var str = '20181105';
var ano = Number(str.substring(0, 4));
var mes = Number(str.substring(4, 6));
var dia = Number(str.substring(6));
var output = new Date(ano, mes - 1, dia).toLocaleDateString('pt-BR');
console.log(output);

Notice that I had to subtract 1 of the month, because the months are indexed at zero (January is zero, February is 1, etc).

Another detail is that toLocaleDateString may not give the exact "dd/mm/yyyy" format, depending on the locale used and the environment settings, as explained in final part of this reply.

Moment js.

But if you can use an external library, I recommend the Moment js.. With her, it’s much easier:

var output = moment('20181105', 'YYYYMMDD').format('DD/MM/YYYY');
console.log(output);
<script src="https://momentjs.com/downloads/moment.min.js"></script>

The first part (moment('20181105', 'YYYYMMDD')) does the Parsing date (YYYYMMDD indicates that it is year, month and day), and then the format generates a string according to the format passed (DD/MM/YYYY -> "day/month/year"). View documentation for more details.

Browser other questions tagged javascript html date

You are not signed in. Login or sign up in order to post.