Javascript 在 IPython 和 Jupyter Notebook 中不起作用答案

【问题标题】：Javascript won't work in IPython and Jupyter NotebookJavascript 在 IPython 和 Jupyter Notebook 中不起作用
【发布时间】：2019-10-23 11:55:35
【问题描述】：

我正在尝试将日期时间选择器小部件添加到我的 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))

【问题讨论】：

标签： javascript jquery html jupyter-notebook ipython

【解决方案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

【讨论】：