ipywidgets 中的自定义 DatePicker答案

【问题标题】：custom DatePicker in ipywidgetsipywidgets 中的自定义 DatePicker
【发布时间】：2019-01-14 03:06:06
【问题描述】：

我正在使用 DatePicker 小部件来选择日期，我必须根据这些小部件在 Jupyter 笔记本程序中执行一些任务。 DatePicker 小部件是使用 ipywidget 库创建的。

我现在面临的问题是它显示了月份和年份的所有日期。

有什么方法可以禁用包含我的应用程序的所有有效日期的列表中不存在的日期。

例如，假设我有一个日期列表，其中包含 2018-12-25、2019-01-09 和 2019-01-13。所以现在，我只想在 DatePicker 小部件中启用这些天，其余日期应该被禁用。

请建议和帮助。！！！

【问题讨论】：

如果您只想允许几个日期（最多可能是几十个），下拉列表似乎是更好的用户体验。
感谢您的建议，但我所拥有的日期列表的日期可能从几个月到几年不等。而且这个日期列表也是动态生成的，这取决于其他用户的选择。考虑到这一点，我认为在小部件中禁用和启用日期是我唯一的选择。
我不认为当前的 DatePicker 实现具有禁用日期输入的功能。一种替代方法是让您的 DatePicker 实例观察一个函数，该函数将根据可接受的日期列表检查所选日期值，如果所选日期不在允许值列表中，则将 DatePicker 小部件值返回给None。

标签： python python-3.x jupyter-notebook ipython ipywidgets

【解决方案1】：

在幕后，它使用 html 日期输入，显然只能限制为最小和最大日期。见here。

这对我的用例来说已经足够了，但我在官方文档中找不到任何有用的东西。通过使用 javascript 在生成的 html 输入框上设置最小和最大标签，我确实找到了解决该问题的方法：

%matplotlib widget

import ipywidgets as widgets
from IPython.display import display, Javascript

date_picker = widgets.DatePicker(
    description='Pick a Date',
    disabled=False,
)
date_picker.add_class("start-date")

script = Javascript("\
                const query = '.start-date > input:first-of-type'; \
                document.querySelector(query).setAttribute('min', '2020-12-01'); \
                document.querySelector(query).setAttribute('max', '2021-01-01'); \
        ")

display(date_picker)
display(script)

它会生成一个带有正确 html 标签的小部件来限制用户输入：

<div class="lm-Widget p-Widget jupyter-widgets widget-inline-hbox widget-datepicker start-date">
    <label class="widget-label" style="" title="Pick a Date" for="26e68439-2334-4335-93e2-9d9903607aab">Pick a Date</label>
    <input type="date" id="26e68439-2334-4335-93e2-9d9903607aab" min="2020-12-01" max="2021-01-01">
</div>

【讨论】：