Code Editor for app.py

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

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

# Display the date picker in Streamlit
components.html(flatpickr_html, height=300)

# Capture the date from the postMessage
selected_date = st.text_input("Selected date", key="selected_date")

# JavaScript to listen to the postMessage and update the Streamlit session
js_code = """
<script>
    window.addEventListener("message", (event) => {
        const selectedDate = event.data;
        const dateInput = window.parent.document.querySelector('input[name="selected_date"]');
        if (dateInput) {
            dateInput.value = selectedDate;
            dateInput.dispatchEvent(new Event("input", { bubbles: true }));
        }
    });
</script>
"""

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

# Display the selected date in Streamlit
if selected_date:
    st.write("You selected:", selected_date)
else:
    st.write("Please select a date.")