Add timezone to DatetimePicker

[thuydotm]

Is your feature request related to a problem? Please describe.

Timezone is an important feature when working with Datetime in general. It would be great if Panel can support that.

Describe the solution you'd like

Provide user the ability to select their timezone by switching between options of a dropdown. It can be an optional argument to DatetimePicker. Let's say timezone (string, or list of available timezones):

• timezone=None: use UTC timezone as of now.
• timezone='auto': automatically determine timezone of user's device.
• timezone=['UTC+0', 'UTC+1', ...]: update the dropdown to list of timezones.

Describe alternatives you've considered

Some approaches that work but require extra efforts to get time in proper timezone, such as:

• Manually add a timezone dropdown and manually convert between timezones.
• Get timezone from JS and send it back to Python.

[hoxbro]

A way to get time timezone information from JS to Python can be done with ReactiveHTML:

import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension()

class Timezone(ReactiveHTML):

    timezone = param.String(None)
    offset = param.String(None)

    # Methods from: https://stackoverflow.com/questions/1091372/getting-the-clients-time-zone-and-offset-in-javascript
    _scripts = {
        "render": """
            data.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; 
            data.offset = new Date().getTimezoneOffset().toString();
        """
    }

tz = Timezone()
tz  # Needs to render before updating the parameters

[thuydotm]

Thanks @Hoxbro! I'll try it out and let you know if it works.