Javascript 韩元'；我不能在IPython和Jupyter笔记本上工作

我正在尝试将datetime picker小部件添加到我的jupyter笔记本应用程序中。所以我从你那里得到了密码

不管怎样，我把代码放进了我的单元格，但它只显示输入表单，当我单击它时，什么也没有发生。
我通过创建一个.html文件来测试代码，它工作得很好，但在jupyter笔记本中却没有。

从IPython.display导入显示，HTML
html_代码=“”
$（函数（）{
$（'input[name=“datetimes”]”）。daterangepicker({
时间选择器：是的，
startDate:moment（）.startOf（'hour'），
endDate:moment（）.startOf（'hour'）。添加（32，'hour'），
区域设置：{
格式：“M/DD hh:mm A”
}
});
});
'''
显示（HTML（HTML_代码））

您可以使用

jp\u proxy\u小部件实现您想要的功能。下面是Python代码：

import jp_proxy_widget
from jp_proxy_widget import js_context

js1 = "https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"
js2 = "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
css = "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"

# Create a proxy widget to hold the input element.
widget = jp_proxy_widget.JSProxyWidget()

# load the style and JS libraries
widget.load_css(css)
widget.load_js_files([js1, js2])

# Store the value from the date/time input in the Python variable 'value'
value = "No value yet."

def change_value(v):
    global value
    value = v

# Initialize the proxy widget with an input element configured using
# daterangepicker.
widget.js_init("""

    element.empty()
    var input = $('<input type="text" name="datetimes" size="100"/>').appendTo(element);
    input.daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
       format: 'M/DD hh:mm A'
     }
  });
  // when the input changes send the value back to python
  input.change(function() { change_value(input.val());} );
  change_value(input.val());

""", change_value=change_value)

# Display the widget
widget

导入jp\u代理\u小部件
从jp_代理_小部件导入js_上下文
js1=”https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"
js2=”https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
css=”https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"
#创建一个代理小部件来保存输入元素。
widget=jp_proxy_widget.JSProxyWidget（）
#加载样式和JS库
widget.load_css（css）
widget.load_js_文件（[js1，js2]）
#将日期/时间输入的值存储在Python变量“value”中
value=“还没有价值。”
def更改_值（v）：
全球价值
值=v
#使用使用配置的输入元素初始化代理小部件
#日期选择器。
widget.js_init（“”）
元素空（）
变量输入=$（''）.appendTo（元素）；
input.daterangepicker({
时间选择器：是的，
startDate:moment（）.startOf（'hour'），
endDate:moment（）.startOf（'hour'）。添加（32，'hour'），
区域设置：{
格式：“M/DD hh:mm A”
}
});
//当输入更改时，将值发送回python
input.change（函数（）{change_值（input.val（））；}）；
更改_值（input.val（））；
“”，更改值=更改值）
#显示小部件
小装置

以下是在Jupyter中执行的代码的屏幕截图：


有关jp_proxy_小部件的更多信息，请点击此处：

import jp_proxy_widget
from jp_proxy_widget import js_context

js1 = "https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"
js2 = "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
css = "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"

# Create a proxy widget to hold the input element.
widget = jp_proxy_widget.JSProxyWidget()

# load the style and JS libraries
widget.load_css(css)
widget.load_js_files([js1, js2])

# Store the value from the date/time input in the Python variable 'value'
value = "No value yet."

def change_value(v):
    global value
    value = v

# Initialize the proxy widget with an input element configured using
# daterangepicker.
widget.js_init("""

    element.empty()
    var input = $('<input type="text" name="datetimes" size="100"/>').appendTo(element);
    input.daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
       format: 'M/DD hh:mm A'
     }
  });
  // when the input changes send the value back to python
  input.change(function() { change_value(input.val());} );
  change_value(input.val());

""", change_value=change_value)

# Display the widget
widget