Code Editor for app.py

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

# HTML and JavaScript for the Flatpickr date picker with Monday as the first day
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
                const inputField = document.getElementById("date-picker");
                window.parent.postMessage(dateStr, "*");
            }
        });
    });
</script>
"""

# Display Flatpickr HTML
components.html(flatpickr_code, height=200)

# JavaScript to listen for the selected date from the Flatpickr date picker
selected_date = st.text_input("Selected date", value=st.session_state.get("selected_date", ""))

# Capture the date from the JavaScript in Streamlit
st.session_state["selected_date"] = selected_date if selected_date else "Please select a date"

# Display the selected date
st.write("You selected:", st.session_state["selected_date"])