JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">

<h1>
Using HTML5 Date Input (Simple Option)
</h1>
<h2>
This is the simplest solution. Modern browsers provide a built-in date picker.
</h2>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker Form</title>
</head>
<body>

    <form>
        <label for="date">Insert Date:</label>
        <input type="date" id="date" name="date">
    </form>
<script>
document.getElementById('date').addEventListener('focus', function() {
    this.showPicker(); // This method opens the date picker for modern browsers
});
</script>
</body>
</html>

CSS

html {
  font-family: sans-serif;
}