# How to change select widget to datetime widget for time?

**URL:** <https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214>\
**Category:** Panel\
**Created:** [October 16, 2023, 1:14pm UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214 "2023-10-16T13:14:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rsignell](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/rsignell/32/5855_2.png) [@rsignell](https://discourse.holoviz.org/u/rsignell)\
**Post date:** [October 16, 2023, 1:14pm UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214/1 "2023-10-16T13:14:14Z")

</div>

As part of my Pangeo Project work, I’m trying to convert this [COAWST Explorer Panel app](https://github.com/reproducible-notebooks/Holoviz-Demos/blob/master/COAWST-Explorer.ipynb)  
to use a datetime picker instead of a selection widget for the time variable (called `ocean_time`):

 ![2023-10-16_09-05-36](https://discourse.holoviz.org/uploads/default/original/2X/1/1d312b95e07e62d9aea8554c54c6ad449e95a214.png)  
I think this the is correct syntax to create the widget:

```auto
import pandas as pd
dt = pd.to_datetime(ds.ocean_time)
datetime_widget = pn.widgets.DatetimePicker(value=dt.min(), start=dt.min(), end=dt.max())

```

but I can’t figure out how to replace the selection widget for the `ocean_time` time coordinate to use the datetime\_widget instead.

I’m hoping the helpful Holoviz community can help! 🙂

The notebook can be run on Binder here:  
[![badge](https://img.shields.io/static/v1.svg?logo=Jupyter&label=Binder&message=GCS&color=green)](https://mybinder.org/v2/gh/reproducible-notebooks/Holoviz-Demos/binder?urlpath=git-pull?repo=https://github.com/reproducible-notebooks/Holoviz-Demos%26amp%3Bbranch=master%26amp%3Burlpath=lab/tree/Holoviz-Demos%3Fautodecode)

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [October 16, 2023, 5:30pm UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214/2 "2023-10-16T17:30:25Z")

</div>

If you don’t specify any widgets kwarg:

```python
def plot(ds, var, base_map):
    extra_dims = list(ds[var].dims[:-2])
    da = ds[var].cf.isel(T=slice(-time_vals,-1)).unify_chunks()
    if len(da.shape) == 4:
        mesh = da.hvplot.quadmesh(x=da.cf['longitude'].name, y=da.cf['latitude'].name, 
                              rasterize=True, geo=True, title=var, attr_labels=False, 
                              fields={da.cf['Z'].name: {'default': float(da.cf['Z'].values[-1])}},
                              groupby=extra_dims, cmap='turbo', width=600, grid=True,
                              height=600).opts(alpha=0.7, data_aspect=None, 
                              hooks=[set_tools],
                              active_tools=['pan', 'box_zoom'])
    else:
        mesh = da.hvplot.quadmesh(x=da.cf['longitude'].name, y=da.cf['latitude'].name, 
                              rasterize=True, geo=True, title=var, attr_labels=False, 
                              groupby=extra_dims, cmap='turbo', width=600, grid=True,
                              height=600).opts(alpha=0.7, data_aspect=None, 
                              hooks=[set_tools], active_tools=['pan', 'box_zoom'])
    print(extra_dims)
    return pn.panel(mesh * base_map)

```

You get a date time slider.  
 ![image](https://discourse.holoviz.org/uploads/default/original/2X/b/bb68002abeff6eaf10a16e1c4d3c2303a4240928.png)

Theoretically, you should be able to do:  
`return pn.panel(mesh * base_map, widgets={"ocean_time": pn.widgets. DatetimePicker})`

---

<div class="post-metadata">

**Author:** ![rsignell](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/rsignell/32/5855_2.png) [@rsignell](https://discourse.holoviz.org/u/rsignell)\
**Post date:** [October 17, 2023, 11:22am UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214/3 "2023-10-17T11:22:19Z")

</div>

@ahuang11, That would be great if it worked (a lot simpler!) but when I tried this I got:

“ValueError: failed to validate DatetimePicker(id=‘p1116’, …).value: expected either None or a value of type String, got numpy.datetime64(‘2023-09-08T01:00:00.000000000’)”

Here’s the full gist: [Jupyter Notebook Viewer](https://nbviewer.org/gist/rsignell-usgs/b09b38fb75dd45c5fbccdfbe007b412b)

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [October 17, 2023, 3:40pm UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214/4 "2023-10-17T15:40:02Z")

</div>

Can you raise an issue on Panel to support numpy datetime? I think it could be potentially supported by checking `if hasattr("tolist")` without explicit import of numpy like:

```python
import panel as pn
import numpy as np
import datetime
pn.extension()
npdt = np.datetime64('2019-01-01 01:00')
pn.widgets.DatetimePicker(value=npdt.tolist())

```

---

<div class="post-metadata">

**Author:** ![rsignell](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/rsignell/32/5855_2.png) [@rsignell](https://discourse.holoviz.org/u/rsignell)\
**Post date:** [October 18, 2023, 12:35am UTC](https://discourse.holoviz.org/t/how-to-change-select-widget-to-datetime-widget-for-time/6214/5 "2023-10-18T00:35:06Z")

</div>

Even if you convert the `datetime64` values to `datetime` values and supply them to the widget, it doesn’t work because hvplot doesn’t leave enough space and the calendar is hidden …  
☹

 ![2023-10-17_20-37-45](https://discourse.holoviz.org/uploads/default/original/2X/0/06a747c46afa83997d507a6c3a00a561adb36fb3.png)

See the full code here,  
[cell [6]](https://nbviewer.org/gist/rsignell-usgs/01f5ce013eb89424d5af2c18236372b6) in this notebook!