如何在PyScript中渲染Panel日期选择器组件？

你的代码在Jupyter中可运行但在PyScript中失效，核心是混用了Jupyter/服务端部署的Panel渲染逻辑，和浏览器端Pyodide环境的渲染规则不匹配，按以下步骤修改即可正常运行：

修正index.html #

原有配置没有锁定Panel版本，容易出现Pyodide环境下的依赖兼容问题，调整后代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <title>PyScript Demo</title>
        <py-env>
            - panel==0.14.1
        </py-env>
    </head>
    <body>
        <div id='output' class="text-3xl text-center"></div>
        <div id='date-widgets'></div>
        <button id="retrieve-data" class="mt-4 p-2 text-white bg-blue-600 rounded">Get Data</button>
        <py-script src="./main.py"></py-script>
    </body>
</html>

锁定0.14.1版本是因为该版本对PyScript alpha版本的兼容性最好，更高版本需要搭配新版PyScript使用。

修正main.py #

原有代码中.servable(target=...)是Panel B/S服务部署时的API，在浏览器端Pyodide环境下无法生效，需要替换为对应环境的渲染方法：

import panel as pn

# 初始化Panel扩展，适配浏览器端渲染
pn.extension()

start_date = pn.widgets.DatePicker(name='Start Date')
end_date = pn.widgets.DatePicker(name='End Date')

# 挂载组件到指定DOM节点
pn.Row(
    pn.WidgetBox('## Query Parameters', start_date, end_date)
).server_doc(target='date-widgets')

var_1 = 'a test string...'
pyscript.write('output', var_1)

运行说明 #

• 首次加载需要等待PyScript拉取Python依赖，耗时1-3分钟属于正常情况
• 后续给Get Data按钮绑定事件时，直接读取start_date.value、end_date.value即可拿到选中的日期值
• Jupyter中直接输出组件对象即可自动渲染的逻辑，在PyScript中不生效，必须显式调用挂载方法指定渲染位置

内容的提问来源于stack exchange，提问作者equanimity