Calendar

Div(
    NotStr("""
            <calendar-date class="cally bg-base-100 border border-base-300 shadow-lg rounded-box">
            <svg aria-label="Previous" class="size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
            <svg aria-label="Next" class="size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
            <calendar-month></calendar-month>
            </calendar-date>
            """),
    Script(src="https://unpkg.com/cally", type="module"),
)

Div(
    NotStr("""
            <input popovertarget="cally-popover1" class="input input-border" id="cally1" style="anchor-name:--cally1">
            Pick a date
            </input>
            <div popover id="cally-popover1" class="dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
            <calendar-date class="cally" onchange={document.getElementById('cally1').innerText = this.value}>
                <svg aria-label="Previous" class="size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
                <svg aria-label="Next" class="size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
                <calendar-month></calendar-month>
            </calendar-date>
            </div>
        """),
    Script(src="https://unpkg.com/cally", type="module"),
)

Script(src='https://cdn.jsdelivr.net/npm/pikaday/pikaday.js'),
Input(type='text', autocomplete="off", placeholder='Pick a date', id='myDatepicker', cls='input pika-single'),
Script("var picker = new Pikaday({ field: document.getElementById('myDatepicker') });"),