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" oninput="updateStreamlitInput(this.value)">
</div>
<script>
    function updateStreamlitInput(dateStr) {
        const streamlitInput = document.getElementById("streamlit-selected-date");
        streamlitInput.value = dateStr;
        streamlitInput.dispatchEvent(new Event("input", { bubbles: true }));
    }
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("#date-picker", {
            "locale": {
                "firstDayOfWeek": 1 // Monday as the first day
            },
            dateFormat: "Y-m-d",
            onChange: function(selectedDates, dateStr, instance) {
                updateStreamlitInput(dateStr);
            }
        });
    });
</script>
"""

# Embed the date picker in Streamlit and capture the selected date in a hidden field
components.html(flatpickr_code + '<input type="hidden" id="streamlit-selected-date">', height=200)

# Display the selected date
selected_date = st.text_input("Selected date", key="streamlit-selected-date")

# Check if a date was selected and display it
if selected_date:
    st.write("You selected:", selected_date)
else:
    st.write("Please select a date.")