iPyWidget组件DatePicker与SelectionRangeSlider双向联动问题求助

问题根因 #

• SelectionRangeSlider的value属性是不可变元组，无法直接修改其内部的第0/1位元素，必须整体赋值完整的起止值对
• 原update_slider中赋值类型不匹配，不需要传入字符串，也不需要动态修改slider的options配置
• 原update_pick中存在多余的datetime格式转换步骤，可直接简化

修正后完整可运行代码 #

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 = 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):
    # 直接赋值datetime对象即可，无需格式转换
    pick_start.value = selection_range_slider.value[0]
    pick_end.value = selection_range_slider.value[1]

def update_slider(*args):
    # 边界校验1：避免开始日期大于结束日期
    if pick_start.value > pick_end.value:
        pick_start.value, pick_end.value = pick_end.value, pick_start.value
        return
    # 边界校验2：避免选择的日期超出滑块预设范围，可根据需求调整逻辑
    if pick_start.value not in dates:
        pick_start.value = dates[0]
    if pick_end.value not in dates:
        pick_end.value = dates[-1]
    # 查找起止日期在预生成日期序列中的索引，直接修改slider的index属性即可同步更新滑块位置
    start_idx = dates.get_loc(pick_start.value)
    end_idx = dates.get_loc(pick_end.value)
    selection_range_slider.index = (start_idx, end_idx)

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)

功能说明 #

• 拖动SelectionRangeSlider滑块，会自动同步更新两侧DatePicker的日期值
• 修改任意一侧DatePicker的日期，滑块会自动跳转至对应日期范围的位置
• 内置双层边界校验，避免非法输入导致的报错

内容的提问来源于stack exchange，提问作者Alejandro Roldán