If you go for the very simple first example, without the javascript, you can enhance its usability by adding a placeholder attribute.
<input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" placeholder="yyyy-mm-dd">
Like the pattern attribute, supporting browsers will ignore it, but those that fallback to text will show it, giving a hint to the expected format, so they don’t have to keep guessing when it continues to flag as invalid. I would think that date format may seem backward to many non-devs and not an ovbious choice for them.