Streamlit custom components for datetime range picker

[imdreamer2018]

streamlit-datetime-range-picker is a datetime range picker designed for use with Streamlit. It allows users to easily select a range of dates and times.
github: GitHub - imdreamer2018/streamlit-date-picker

Installation

Install the package using the following command:

pip install streamlit-datetime-range-picker

Usage

import streamlit as st
from streamlit_datetime_range_picker import datetime_range_picker

# Use datetime_range_picker to create a datetime range picker
datetime_string = datetime_range_picker(start=-30, end=0, unit='minutes', key='range_picker', 
                                        picker_button={'is_show': True, 'button_name': 'Refresh last 30min'})
if datetime_string is not None:
    start_datetime = datetime_string[0]
    end_datetime = datetime_string[1]

Parameter

• start: Default start time, type: int, default value: -30.
• end: Default end time, type: int, default value: 0.
• unit: Default time unit, type: str, options: milliseconds, seconds, minutes, hours, days, weeks, months, years.
• key: Picker key, default value: None.
• picker_button: Refresh button configuration, type: {‘is_show’: bool, ‘button_name’: str}, default values: False and ‘Refresh last 30min’. When the button is clicked, it refreshes the selected time range.
• The return value of datetime_range_picker is of type str.

[dataprofessor]

Thanks @imdreamer2018 for creating this component, big kudos!

[Alexandre_Touzet]

Thanks @imdreamer2018 ! Would it be possible to only use the picker to select one date and time, and not a range? I don’t know if it is clear, but it would allow us to not use the st.date_input and st.time_input separately and simply use the calendar as it is in your picker.

[imdreamer2018]

Hi,
date picker feature has been implement in new version.

install

pip install streamlit-date-picker

Usage

import streamlit as st

from streamlit_date_picker import date_range_picker, PickerType, Unit, date_picker

st.title('Streamlit Date Picker')

# Use date_range_picker to create a datetime range picker
st.subheader('Date Range Picker')
date_range_string = date_range_picker(picker_type=PickerType.time.string_value,
                                      start=-30, end=0, unit=Unit.minutes.string_value,
                                      key='range_picker',
                                      refresh_button={'is_show': True, 'button_name': 'Refresh last 30min',
                                                      'refresh_date': -30,
                                                      'unit': Unit.minutes.string_value})
if date_range_string is not None:
    start_datetime = date_range_string[0]
    end_datetime = date_range_string[1]
    st.write(f"Date Range Picker [{start_datetime}, {end_datetime}]")

st.subheader('Date Picker')
# Use date_picker to create a date picker
date_string = date_picker(picker_type=PickerType.time.string_value, value=0, unit=Unit.days.string_value,
                          key='date_picker')

if date_string is not None:
    st.write('Date Picker: ', date_string)

[Alexandre_Touzet]

Thank you for the amazing widget!

[Alexandre_Touzet]

Hello again @imdreamer2018,

Is there a way to modify the end time to be different than now (or 0) when the refresh button is clicked?

Currently, with a refresh_date of -30 the refreshed_end_date would be 0 so the refresh period is only for 30min. I would like that when I click on the refresh button, the widget is reset to a 24h period starting from now, is it possible?

I tried to access and modify the different files directly but with no success

[imdreamer2018]

Hi @Alexandre_Touzet ,
You can set refresh date and unit，refresh date to -1, unit to. days, like this:

date_range_string = date_range_picker(picker_type=PickerType.time.string_value,
                                      start=-1, end=0, unit=Unit.days.string_value,
                                      key='range_picker',
                                      refresh_button={'is_show': True, 'button_name': 'Refresh last 1Days',
                                                      'refresh_date': -1,
                                                      'unit': Unit.days.string_value})

[Alexandre_Touzet]

Hi @imdreamer2018 ,

Thank you for your reply, but isn’t possible to set refresh_date to 0 and set the end 24h later? I do not consider events in the past in my application so refreshing to a past period isn’t really useful

[imdreamer2018]

Hi @Alexandre_Touzet ,
You can set refresh date and unit，refresh date to 1, unit to days

[Alexandre_Touzet]

Thank you!!

[ELFALLAH02]

I can’t use it on python 3.8

[Girish]

@imdreamer2018 the widget is usfull, but is there any option to use the preset as well?

[imdreamer2018]

@ELFALLAH02 Hi,
I will downgrade to python3.8 in next version.

[imdreamer2018]

@Girish Hi,
This components has default value for option. I don’t know “is there any option to use the preset as well?” could your please give me more detail?

[Girish]

something link this! if we can have an option.

[imdreamer2018]

@Girish This is very nice suggest，I will spike the plan, maybe implement this feature in next version.

[Girish]

one another issue is that, the component is not getting overlapped with the other component while the datepicker is shown. instead it is creating a space between the the other component as show in the image for refrence. it will be great if u can fix it, which will probably help user experience.

[tomi-trost]

There is a bugg that causes the date-range components to flicker with the introduction of streamlit version 1.32.0. I managed to solve the issue by downgrading to streamlit 1.32.0.

Big props for the component tho!

[lkdd-ao]

A great component that is more flexible than the official component. When I first used it, I discovered the issue of component loop refresh. I checked the page structure code and found that it endlessly generated <style></style> style files until the browser crashed.
It would be great if this problem could be solved.
Thank you.

[Girish]

Hi @imdreamer2018, if you can help with any update regarding the flicker issue for the latest streamlit versions.