Calendar 2

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker Form with Flatpickr</title>
    <!-- Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body>

<h1>
Using a Library (More Customization)
</h1>
<h2>
If you need a more feature-rich calendar with better UI/UX and browser compatibility, you can use a JavaScript library like Flatpickr.
</h2>
    <form>
        <label for="date">Insert Date:</label>
        <input type="text" id="date" name="date">
    </form>

    <!-- Flatpickr JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Initialize Flatpickr
        flatpickr("#date", {
            enableTime: false,
            dateFormat: "Y-m-d", // Customize the date format
        });
    </script>

</body>
</html>

CSS

html {
  font-family: sans-serif;
}