JSFiddle - React, Tailwind, and code Playground

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>
    <!-- Include Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Include Flatpickr JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <!-- Include Portuguese Locale -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
</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>

<script>
    // Initialize Flatpickr
    flatpickr("#date", {
        enableTime: false,
        dateFormat: "d/m/Y", // Change to day/month/year format
        locale: "pt", // Set locale to Portuguese
    });
</script>

<!-- Add Custom CSS to Change Highlight Color -->
<style>
    .flatpickr-day.selected {
        background-color: #e31e16 !important; /* Change selected day color */
        color: white !important; /* Optional: change text color for contrast */
    }
</style>

</body>
</html>

CSS

html {
      font-family: sans-serif;
    }
    
    .flatpickr-day.selected {
        background-color: #e31e16 !important; /* Change selected day color */
        color: white !important; /* Optional: change text color for contrast */
    }