How can I change the date format using element with Vue 3/Typescript component?

Question

I'm trying to format a date in dd/mm/yyyy format in Vue 3 with TypeScript, but the formatting isn't being applied. I saw many answers recommending using moment.js but the documentation of this library said it is outdated and it can be achieved with native toLocaleDateString("en-GB").

Here's my code:

<template>
  <div>
    <label for="date">Date:</label>
    <input type="date" id="date" v-model="selectedDate" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const selectedDate = ref("");
</script>

I tried using:

import { ref, computed, watch } from "vue";
// ...
watch(selectedDate, (newValue, oldValue) => {
  const newDate = new Date(newValue);
  const formattedDate = newDate.toLocaleDateString("en-GB");
  selectedDate.value = formattedDate;
});

Also tried adding:

const format = (value: string) => {
  const formatter = new Intl.DateTimeFormat("en-GB", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  });
  return formatter.format(new Date(value));
};
// ...
    <input type="date" id="date" :formatter="format" v-model="selectedDate" />

In both cases, when I enter the page, the date is still rendered as the default format (mm/dd/yyyy).

I also tried using the solution from this other question but <input type="date"> does not work properly with string value. I would really like to have the widget for selecting the date.

How can I properly format the date in dd/mm/yyyy format and handle these widget problems, if possible without installing other libraries?

Answer 1

I'm pretty sure there's no standard way to change the way that date-type HTML <input>s render the order of parts of dates.

Quoting from MDN's page on date inputs:

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

And from How to make <input type="date"> display the date in localized format in Chrome?, the top answer says:

Chrome renders the date on the format for the language configured in Settings > Language:

The fact that moment.js is deprecated is irrelevant- you wouldn't have been able to get what you want using it either.

If you want to control the date formatting of a date input, you either have to write your own date input instead of using <input type="date">, or you could fork Chromium or whatever browser you use and make a modified version of them where that's configurable and ship that to your users. (not practical (I know))

The asker indicated in the comments that they found vuejs3-datepicker useful in solving their problem / achieving their goal.