CODEWITHSUNDEEP
pythonpyscript
equanimity
equanimity

Reputation: 2533

PyScript: how to render a Panel date chooser widget?

I'm using PyScript and would like to render a Panel date chooser widget. My code (which works in a Jupyter Notebook) is as follows :

index.html

<!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
        </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>

main.py

import panel as pn

pn.extension()

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

app = pn.Row(pn.WidgetBox('## Query Parameters', start_date, end_date)).servable(target='date-widgets')
#app

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

Any assistance you can provide would be most appreciated. Thanks!

Upvotes: 0

Views: 636

Answers (1)

John Hanley
John Hanley

Reputation: 81444

Your example is missing several required JavaScript files:

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/[email protected]/dist/panel.min.js"></script>

If you have any further issues, copy and paste the following files.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/[email protected]/dist/panel.min.js"></script>

        <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
        </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>

main.py:

import panel as pn

def show_date_picker():
        pn.extension()

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

        wb = pn.WidgetBox('## Query Parameters', start_date, end_date)

        pn.Row(
                wb,
        ).servable(target='date-widgets')

show_date_picker()

Upvotes: 2

Related Questions