{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 日期\n",
    "\n",
    "`Date Input` 元素是基于 Quasar的 [QDate组件](https://quasar.dev/vue-components/date)。日期是字符串，格式由 `mask` 参数定义。\n",
    "\n",
    "你还可以使用 `range` 或 `multiple` 属性来选择日期范围或多个日期：\n",
    "\n",
    "```python\n",
    "ui.date({'from': '2023-01-01', 'to': '2023-01-05'}).props('range')\n",
    "ui.date(['2023-01-01', '2023-01-02', '2023-01-03']).props('multiple')\n",
    "ui.date([{'from': '2023-01-01', 'to': '2023-01-05'}, '2023-01-07']).props('multiple range')\n",
    "```\n",
    "\n",
    "- `value`: 初始日期\n",
    "- `mask`: 日期字符串的格式（默认：`'YYYY-MM-DD'`）\n",
    "- `on_change`: 更改日期时执行的回调函数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.date(value='2023-01-01', on_change=lambda e: result.set_text(e.value))\n",
    "result = ui.label()\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带日期选择器的输入元素\n",
    "这个示例展示了如何用输入元素实现一个日期选择器。我们在输入元素的追加插槽中放置了一个图标。当点击该图标时，我们打开一个带有日期选择器的菜单。\n",
    "\n",
    "日期绑定到输入元素的值上。因此，无论何时更改日期，输入元素和日期选择器都会保持同步。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.input('Date') as date:\n",
    "    with date.add_slot('append'):\n",
    "        ui.icon('edit_calendar').on('click', lambda: menu.open()).classes('cursor-pointer')\n",
    "    with ui.menu() as menu:\n",
    "        ui.date().bind_value(date)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 日期过滤\n",
    "\n",
    "这个示例展示了如何在日期选择器中过滤日期。为了将一个函数传递给日期选择器，我们使用`:options`属性。前面的冒号告诉NiceGUI该值是一个JavaScript表达式。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.date.Date at 0x1d86708db10>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.date().props('''default-year-month=2023/01 :options=\"date => date <= '2023/01/15'\"''')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "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.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}