Streamlit custom components for datetime range picker

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.
3 Likes

Thanks @imdreamer2018 for creating this component, big kudos!

1 Like

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.

1 Like

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)
2 Likes

Streamlit DatePicker

github: GitHub - imdreamer2018/streamlit-date-picker

Project Introduction

streamlit-date-picker is a date picker designed for use with Streamlit. It allows users to easily select a range of dates and times.

Installation

Install the package using the following command:

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)

Parameter

Range Picker

  • picker_type: Default picker type, type: str, options: time, date, week, month, quarter, year.
  • 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.
  • refresh_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.

Date Picker

  • picker_type: Default picker type, type: str, options: time, date, week, month, quarter, year.
  • value: Default value, 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.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

2 Likes

Thank you for the amazing widget!

1 Like

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

1 Like

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})
1 Like

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

1 Like

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

1 Like

Thank you!!

1 Like

I can’t use it on python 3.8

1 Like

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

1 Like

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

2 Likes

@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?

1 Like

something link this! if we can have an option.

2 Likes

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

2 Likes

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.

1 Like