Streamlit Datetime Picker

---

What is Streamlit Datetime Picker?

streamlit-datetime-picker is the input component to use with Streamlit.

Installation

pip install streamlit-datetime-picker

Quickstart

create an example.py file

import streamlit as st
from streamlit_datetime_picker import date_time_picker, date_range_picker

dt = date_time_picker('Date Time Input')
st.write(f"DateTimeInput: {dt}")
(start, end) = date_range_picker()
st.write(f"DateRangeInput: From {start} to {end}")

run streamlit

streamlit run example.py

Helper function

As streamlit rerun the whole python script whenever a component value is changed, thus cannot use datetime.now() directly.
Can make use of the st.session_state to store the current date and time so that the initial value doens't change whenever the page is reloaded.

from datetime import datetime, timedelta

def now() -> datetime:
    if 'now' not in st.session_state:
        st.session_state['now'] = datetime.now().astimezone()
    return st.session_state['now']

def clearNow():
    if 'now' in st.session_state:
        del st.session_state['now']

Features

Theme

date_time_picker and date_range_picker will change color depend on your streamlit theme

Switchable picker

Switch in different types of picker

• datetime
• time
• date
• week
• month
• quarter
• year

Time resolution.

This property is only application is datetime and date picker

• hour
• minute
• second
• millisecond

Placeholder

Place holder text will display when the value is not selected

dt = date_time_picker(placeholder='Enter your birthday')

Allow Empty

Allow empty for the date_range_picker. It's useful when you need to keep the "to date".
Provide None at the initial value will provide

start, end = date_range_picker(value=(now()-timedelta(7), None), placeholder=('Start datetime', 'Till Now'))
end = now() if end is None else end
st.write(f"DateRangeInput: From **{start}** to **{end}**")

Custom Format

Custom format can be set. Format string syntax can reference in dayjs documentation

dt = date_time_picker(format='DD-MMM-YYYY HH:mm:ss')

Allow Clear

allowClear=False will not allow user to clear the date and time value.

dt = date_time_picker(value=now(), allowClear=False)
start, end = date_range_picker(value=(now()-timedelta(7), now()), allowClear=False)

Limit Datetime Range

Limit the range of dates by providing minDate and maxDate

dt = date_time_picker(value=now(), minDate=now()-timedelta(7), maxDate=now()+timedelta(7))
start, end = date_range_picker(value=(now()-timedelta(7), now()), minDate=now()-timedelta(7), maxDate=now()+timedelta(7))

Disabled Date

Disabled selected dates

disabledDates = [now()-timedelta(3), now()+timedelta(2)]
dt = date_time_picker(value=now(), disabledDates=disabledDates)
start, end = date_range_picker(value=(now()-timedelta(1), now()), disabledDates=disabledDates)

Preset Values

We can set preset values to date_time_picker and date_range_picker to improve user experience.

nowVal = now()
dt = date_time_picker(value=nowVal, presets=[Preset[datetime]('24hr ago', nowVal-timedelta(1)), Preset[datetime]('A week ago', nowVal-timedelta(7))])
start, end = date_range_picker(value=(nowVal-timedelta(1), now()), presets=[Preset[Tuple[datetime, datetime]]('This week', (nowVal-timedelta(1+nowVal.weekday()), nowVal+timedelta(6-nowVal.weekday())))])

Customize User Interface

Size: The input box comes in three sizes. middle, small and large are avaliable.

Variant: There are outlined, filled and borderless variants to choose from.

Status: status could be error or warning.

Add to streamlit Containers

You can add to other different streamlit container.

col1, col2 = st.columns([1, 2])
with col1:
    dt = date_time_picker(picker='week')
with col2:
    start, end = date_range_picker()