retrieving a date from a different source and displaying it in a date

Question

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications?

                        <div class="input-group input-group text-center input-cep w-mmd-50 input-date">
                            <input formControlName="data" type="date" min="{{today}}" class="form-control"
                            id="inputData"  >
                       </div>

I have researched and could not find any HTML, javascript, or Angular pipe solutions for this issue. It seems that the date format changes based on locale or browser settings.

javascript html angular

Answer 1

Answer №1

If you want to change the default format (yyyy-mm-dd) that you get from an input type="date", you can customize it to fit your needs. For a detailed guide, you can refer to this link

function myDateFormat() {

var dateControl = document.querySelector('input[type="date"]');
console.log(dateControl.value);
const [year, month, day] = dateControl.value.split('-');

const result = [day, month, year].join('/');
document.getElementById("showDate").innerHTML = result;

}

#showDate {
margin-top:10px;
}

<input type="date" onchange="myDateFormat()">
<div id="showDate"></div>

Answer 2

If you want to change the default format (yyyy-mm-dd) that you get from an input type="date", you can customize it to fit your needs. For a detailed guide, you can refer to this link

function myDateFormat() {

var dateControl = document.querySelector('input[type="date"]');
console.log(dateControl.value);
const [year, month, day] = dateControl.value.split('-');

const result = [day, month, year].join('/');
document.getElementById("showDate").innerHTML = result;

}

#showDate {
margin-top:10px;
}

<input type="date" onchange="myDateFormat()">
<div id="showDate"></div>

Answer 3

Answer №2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date [emphasis added]

Keep in mind: The way the date is displayed may not match the actual value — the displayed date format depends on the user's browser locale, while the parsed value is always formatted as yyyy-mm-dd.

Basically, you can rely on the browser for formatting because it will vary based on the user’s location for global use.

Answer 4

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date [emphasis added]

Keep in mind: The way the date is displayed may not match the actual value — the displayed date format depends on the user's browser locale, while the parsed value is always formatted as yyyy-mm-dd.

Basically, you can rely on the browser for formatting because it will vary based on the user’s location for global use.

retrieving a date from a different source and displaying it in a date

Answer №1

Answer №2

Similar questions

Creating dynamic canvas elements with images using HTML and JavaScript

Implement a click event using jQuery specifically for Internet Explorer version 7

Using a jquery function within a Laravel view

Looking to extract data from a Json object and add it into a table

Unable to dynamically display an HTML5 video using JavaScript

Maintaining consistent height using JavaScript

The issue with Node.js router failing to process delete requests

How to use Express Validator to validate both email and username within a single field?

Enhance your WordPress menu with additional attributes

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

The Socket.io client establishes connections with multiple servers simultaneously

Is there a way to send URL variables to express.js similar to how it's done in PHP?

Troubleshooting a Problem with AngularJS $.ajax

Form validation using jQuery and AJAX

Tips for getting a browser to clear the cache specifically for the .html files on your website

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

What is the maximum size allowed for a background image in CSS?

Place the first paragraph within a div above another paragraph in the same div

Setting the parent's height to match one of its children

What is the best way to choose dropdown values by utilizing various button IDs?