Date-FNS, format date

[Fred638]

🏷️ Discussion Type

Question

Body

I am using Date-FNS and need to format the input field, type="date" defaultValue={formattedDate} to dd-MMM-yyyy. Desired input: i.e. 02-JUL-2026. I am getting: 2026-07-02.

const currentDate = new Date() const formattedDate = format(currentDate, 'dd-MMM-yyyy')

Guidelines

• I have read and understood this category's guidelines before making this post.

[bugthread]

Use yyyy-MM-dd for the actual type="date" value. The browser date input only accepts that format, so 02-JUL-2026 will not work as the field value even if date-fns can create that string.

You can keep two formats if you need both:

const currentDate = new Date()

const inputDate = format(currentDate, 'yyyy-MM-dd')
const displayDate = format(currentDate, 'dd-MMM-yyyy').toUpperCase()

Then use inputDate in the input:

<input type="date" defaultValue={inputDate} />

If you want the user to see 02-JUL-2026, you would need a normal text input or a separate display value next to the date picker. The native date input format is controlled by the browser/locale, not fully by the string you pass in.

[ryanpinnock10]

Hey — the issue here isn't date-fns, it's working exactly right. The problem is a fundamental constraint of the HTML spec itself.

type="date" inputs always use yyyy-MM-dd — full stop. The HTML specification mandates that the value of a date input must be in yyyy-MM-dd format (e.g. 2026-07-02). This is true regardless of what you pass to it. If the value doesn't match that format exactly, the browser treats the field as empty. So when you set defaultValue="02-JUL-2026", the browser discards it silently.

The browser controls the visual display, not JavaScript. What you actually see in a date input (whether it renders as 07/02/2026, 02.07.2026, or something else) is determined entirely by the user's OS locale — the browser renders it however it wants. You cannot override that with CSS or JS on the input itself.

Your date-fns code is correct — you just need to use the formatted value separately for display, not as the input's value. Here's the pattern:

import { format, parseISO } from 'date-fns';

// The raw value the date input works with — must be yyyy-MM-dd
const rawDate = '2026-07-02';

// Formatted for display purposes only
const displayDate = format(parseISO(rawDate), 'dd-MMM-yyyy').toUpperCase();
// → "02-JUL-2026"

The practical fix depends on your use case:

1. Read-only display + hidden input — keep a hidden type="date" for form submission and show the formatted value in a <span> or a readOnly text input:

<span>{displayDate}</span>
<input type="hidden" name="date" value={rawDate} />

2. Fully custom date picker — use a library like react-datepicker or react-day-picker, which give you complete control over formatting and display while still giving you a proper Date object to work with.

The short version: use type="date" for collecting/storing the value (always yyyy-MM-dd), and use date-fns format() to render a human-friendly version of that value anywhere else in your UI.

[Fred638]

Thanks a lot for the explanation! Exactly what I was trying to achieve. I will take it from here.