Adding a DatetimePicker widget (#2107)

examples/reference/widgets/DatetimePicker.ipynb

@@ -0,0 +1,123 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import datetime\n",
+    "\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``DatetimePicker`` widget allows selecting selecting a datetime value using a text box and the browser's datetime-picking utility.\n",
+    "\n",
+    "For more information about listening to widget events and laying out widgets refer to the [widgets user guide](../../user_guide/Widgets.ipynb). Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the [param user guide](../../user_guide/Param.ipynb). To express interactivity entirely using Javascript without the need for a Python server take a look at the [links user guide](../../user_guide/Param.ipynb).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "##### Core\n",
+    "\n",
+    "* **``value``** (datetime): The selected value as a datetime type\n",
+    "* **``start``** (date): Start date of the widget\n",
+    "* **``end``** (date): End date of the widget\n",
+    "* **``disabled_dates``** (list): Dates to make unavailable for selection; others will be available\n",
+    "* **``enabled_dates``** (list): Dates to make available for selection; others will be unavailable\n",
+    "* **``enable_time:``** (boolean): Enable change of the time in the widget, default is True\n",
+    "* **``enable_seconds:``** (boolean): Enable change of the seconds in the widget, default is True\n",
+    "* **``military_time:``** (boolean): Enable 24 hours time in the widget, default is True\n",
+    "\n",
+    "\n",
+    "##### Display\n",
+    "\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``visible``** (boolean): Whether the widget is visible\n",
+    "* **``name``** (str): The title of the widget\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``DatetimePicker`` uses a browser-dependent calendar widget to select the datetime:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "datetime_picker = pn.widgets.DatetimePicker(name='Datetime Picker', value=datetime.datetime(2021, 3, 2, 12, 10))\n",
+    "\n",
+    "datetime_picker"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``DatetimePicker.value`` returns a datetime type that can be read out or set like other widgets:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "datetime_picker.value"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Controls\n",
+    "\n",
+    "The `DatetimePicker` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(datetime_picker.controls(jslink=True), datetime_picker)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

examples/reference/widgets/DatetimeRangePicker.ipynb

@@ -0,0 +1,124 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import datetime\n",
+    "\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``DatetimeRangePicker`` widget allows selecting selecting a datetime value using a text box and the browser's datetime-picking utility.\n",
+    "\n",
+    "For more information about listening to widget events and laying out widgets refer to the [widgets user guide](../../user_guide/Widgets.ipynb). Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the [param user guide](../../user_guide/Param.ipynb). To express interactivity entirely using Javascript without the need for a Python server take a look at the [links user guide](../../user_guide/Param.ipynb).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "##### Core\n",
+    "\n",
+    "* **``value``** (tuple): Tuple of upper and lower bounds of the selected range expressed as datetime types\n",
+    "* **``start``** (date): Start date of the widget\n",
+    "* **``end``** (date): End date of the widget\n",
+    "* **``disabled_dates``** (list): Dates to make unavailable for selection; others will be available\n",
+    "* **``enabled_dates``** (list): Dates to make available for selection; others will be unavailable\n",
+    "* **``enable_time:``** (boolean): Enable change of the time in the widget, default is True\n",
+    "* **``enable_seconds:``** (boolean): Enable change of the seconds in the widget, default is True\n",
+    "* **``military_time:``** (boolean): Enable 24 hours time in the widget, default is True\n",
+    "\n",
+    "\n",
+    "##### Display\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``visible``** (boolean): Whether the widget is visible\n",
+    "* **``name``** (str): The title of the widget\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``DatetimeRangePicker`` uses a browser-dependent calendar widget to select the datetime:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "values = (datetime.datetime(2021, 3, 2, 12, 10), datetime.datetime(2021, 3, 2, 12, 22))\n",
+    "\n",
+    "datetime_range_picker = pn.widgets.DatetimeRangePicker(name='Datetime Range Picker', value=values)\n",
+    "\n",
+    "datetime_range_picker"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``DatetimeRangePicker.value`` returns a tuple of datetime values that can be read out and set like other widgets:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "datetime_range_picker.value"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Controls\n",
+    "\n",
+    "The `DatetimeRangePicker` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(datetime_range_picker.controls(jslink=True), datetime_range_picker)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

panel/models/__init__.py

@@ -5,6 +5,7 @@
 files.
 """
 
+from .datetime_picker import DatetimePicker  # noqa
 from .idom import IDOM # noqa
 from .ipywidget import IPyWidget # noqa
 from .layout import Card # noqa

panel/models/datetime_picker.py

@@ -0,0 +1,65 @@
+from bokeh.core.enums import CalendarPosition
+from bokeh.core.properties import (
+    Bool,
+    Date,
+    Either,
+    Enum,
+    List,
+    Nullable,
+    String,
+    Tuple,
+)
+from bokeh.models.widgets.inputs import InputWidget
+
+
+class DatetimePicker(InputWidget):
+    ''' Calendar-based date picker widget.
+
+    '''
+
+    value = String(help="""
+    The initial or picked date.
+    """)
+
+    min_date = Nullable(Date, help="""
+    Optional earliest allowable date.
+    """)
+
+    max_date = Nullable(Date, help="""
+    Optional latest allowable date.
+    """)
+
+    disabled_dates = List(Either(Date, Tuple(Date, Date)), default=[], help="""
+    A list of dates of ``(start, end)`` date ranges to make unavailable for
+    selection. All other dates will be avalable.
+
+    .. note::
+        Only one of ``disabled_dates`` and ``enabled_dates`` should be specified.
+    """)
+
+    enabled_dates = List(Either(Date, Tuple(Date, Date)), default=[], help="""
+    A list of dates of ``(start, end)`` date ranges to make available for
+    selection. All other dates will be unavailable.
+
+    .. note::
+        Only one of ``disabled_dates`` and ``enabled_dates`` should be specified.
+    """)
+
+    position = Enum(CalendarPosition, default="auto", help="""
+    Where the calendar is rendered relative to the input when ``inline`` is False.
+    """)
+
+    inline = Bool(default=False, help="""
+    Whether the calendar sholud be displayed inline.
+    """)
+
+    enable_time = Bool(default=True)
+
+    enable_seconds = Bool(default=True)
+
+    military_time = Bool(default=True)
+
+    date_format = String("Y-m-d H:i:S")
+
+    mode = String(default="single", help="""
+    Should either be "single" or "range".""")