Code Editor for app.py

import streamlit as st
import streamlit.components.v1 as components

# Custom JavaScript and CSS for flatpickr
flatpickr_code = """
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div>
    <input type="text" id="date-picker" placeholder="Select a date">
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("#date-picker", {
            "locale": {
                "firstDayOfWeek": 1 // Monday as the first day
            },
            dateFormat: "Y-m-d",
            onChange: function(selectedDates, dateStr, instance) {
                // Send the selected date to Streamlit using a custom event
                const event = new CustomEvent("date-selected", { detail: dateStr });
                window.dispatchEvent(event);
            }
        });
    });
</script>
"""

# Add JavaScript event listener to capture the date and pass it to Streamlit
components.html(flatpickr_code, height=100)

# JavaScript listener to update Streamlit's session_state when date is selected
selected_date = st.text_input("Selected date")

def js_listener():
    js_code = """
    <script>
        // Listen for the custom event from flatpickr
        window.addEventListener("date-selected", (e) => {
            // Update the Streamlit text input with the selected date
            Streamlit.setComponentValue(e.detail);
        });
    </script>
    """
    return js_code

# Embed the JavaScript listener
components.html(js_listener(), height=0)

# Display the selected date
if selected_date:
    st.write("You selected:", selected_date)