iPyWidget - DatePicker 与 SelectionRangeSlider 交互问题

Question

我正在尝试使 DatePicker 与 SelectionRangeSlider 小部件交互。到目前为止，我可以设法 link 使用 DatePicker 的滑块，但我在使用相反的方法时遇到了麻烦。

使用此代码，周期滑块更新 DatePicker：

from datetime import datetime
import pandas as pd
import ipywidgets as widgets

start_date = datetime(2021, 7, 1)
end_date = datetime(2021, 7, 5)

dates = pd.date_range(start_date, end_date, freq='D')

options = [(date.strftime(' %d %b %Y '), date) for date in dates]

pick_start = widgets.DatePicker(
    description='',
    disabled=False,
    value = start_date
)
pick_end = start_day = widgets.DatePicker(
    description='',
    disabled=False,
    value=end_date
)

selection_range_slider = widgets.SelectionRangeSlider(
    options=options,
    index=(0, len(options) - 1),
    description='Period',
    orientation='horizontal',
    layout=widgets.Layout(width='100%', padding='35px')
)


def update_pick(*args):
    pick_start.value = datetime.strptime(selection_range_slider.value[0].strftime("%Y-%m-%d"), "%Y-%m-%d")
    pick_end.value = datetime.strptime(selection_range_slider.value[1].strftime("%Y-%m-%d"), "%Y-%m-%d")

def update_slider(*args):
    selection_range_slider.value[0] =  pick_start.value.strftime("%Y-%m-%d")
    selection_range_slider.value[1] =  pick_end.value.strftime("%Y-%m-%d")

selection_range_slider.observe(update_pick, 'value')
pick_start.observe(update_slider, 'value')
pick_end.observe(update_slider, 'value')

center_layout = widgets.Layout(display='flex',
                                       align_items='center',
                                       width='100%')

day = widgets.HBox(children=[pick_start, selection_range_slider, pick_end], layout=center_layout)

display(day)

也尝试使用这个函数没有结果：

def update_slider(*args):
    start_date = datetime(pick_start.value.year, pick_start.value.month, pick_start.value.day)
    end_date = datetime(pick_end.value.year, pick_end.value.month, pick_end.value.day)

    dates = pd.date_range(start_date, end_date, freq='D')

    options = [(date.strftime(' %d %b %Y '), date) for date in dates]
    
    selection_range_slider.value[0] =  options[0]
    selection_range_slider.value[1] =  options[len(options)-1]

在 DatePicker 与 SelectionRangeSlider 交互方面需要帮助

谢谢！

Answer 1

您在这里很好地创建了一个独立的问题，谢谢。为您的下一个问题提供一些建议以加快回答速度。

请包含你的导入，没有它们我无法运行你的代码：

from datetime import datetime
import pandas as pd
import ipywidgets as widgets

请 post 您在代码运行时看到的任何错误消息。我得到了一个 ValueError，它可以进一步改善问题。

错误说分配给元组索引时出现问题，这是我的解决方案。

直接赋值整个元组，不能先更新索引0再更新selection_range_slider
的索引1
使用原始日期时间在小部件之间传递，您的混合字符串转换导致了一些问题。您仍然可以通过使用选项字典来更改日期在滑块中的显示方式。

from datetime import datetime
import pandas as pd
import ipywidgets as widgets

start_date = datetime(2021, 7, 1)
end_date = datetime(2021, 7, 5)

dates = pd.date_range(start_date, end_date, freq='D')

options = {date.strftime(' %d %b %Y '): date for date in dates}

pick_start = widgets.DatePicker(
    description='',
    disabled=False,
    value = start_date
)
pick_end = start_day = widgets.DatePicker(
    description='',
    disabled=False,
    value=end_date
)

selection_range_slider = widgets.SelectionRangeSlider(
    options=options,
    index=(0, len(options) - 1),
    description='Period',
    orientation='horizontal',
    layout=widgets.Layout(width='100%', padding='35px')
)


def update_pick(*args):
    pick_start.value = selection_range_slider.value[0]
    pick_end.value = selection_range_slider.value[1]

def update_slider(*args):
    selection_range_slider.value =  (pick_start.value, pick_end.value)

selection_range_slider.observe(update_pick, 'value')
pick_start.observe(update_slider, 'value')
pick_end.observe(update_slider, 'value')

center_layout = widgets.Layout(display='flex',
                                       align_items='center',
                                       width='100%')

day = widgets.HBox(children=[pick_start, selection_range_slider, pick_end], layout=center_layout)

display(day)

iPyWidget - DatePicker 与 SelectionRangeSlider 交互问题

iPyWidget - DatePicker interact with SelectionRangeSlider problem

datepicker

jupyter-notebook

ipywidgets