Javascript 不适用于 IPython 和 Jupyter Notebook

Question

我正在尝试向我的 jupyter notebook APP 添加一个日期时间选择器小部件。所以我从 here

得到了代码

无论如何，我将代码放入我的单元格中，但它只显示输入表单，当我点击它时没有任何反应。
我通过创建单个 .html 文件来测试代码，它运行良好，但在 jupyter notebook 中却没有。 only an empty form is shown as you can see on this pic

from IPython.display import display, HTML

html_code = '''
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

</head>

<body>

<input type="text" name="datetimes" />

<script>
$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
</script>
</body>



'''

display(HTML(html_code))

Answer 1

您可以使用 jp_proxy_widget 实现您想要的。下面是 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

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

有关 jp_proxy_widget 的更多信息，请访问此处：https://github.com/AaronWatters/jp_proxy_widget

Javascript 不适用于 IPython 和 Jupyter Notebook

Javascript won't work in IPython and Jupyter Notebook

html

javascript

jquery

ipython

jupyter-notebook