fes.js/ui/datePicker.html

46 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DatePicker 日期选择器 | Fes.js</title>
<meta name="generator" content="VuePress 1.5.4">
<meta name="description" content="中台应用前端快速解决方案">
<link rel="preload" href="/fes.js/assets/css/0.styles.54a65285.css" as="style"><link rel="preload" href="/fes.js/assets/js/app.d4a34833.js" as="script"><link rel="preload" href="/fes.js/assets/js/2.1380c702.js" as="script"><link rel="preload" href="/fes.js/assets/js/15.43f80fe4.js" as="script"><link rel="preload" href="/fes.js/assets/js/10.2329d47f.js" as="script"><link rel="prefetch" href="/fes.js/assets/js/100.c569829e.js"><link rel="prefetch" href="/fes.js/assets/js/101.4c4176fa.js"><link rel="prefetch" href="/fes.js/assets/js/102.ba7e3884.js"><link rel="prefetch" href="/fes.js/assets/js/103.ef62cdd7.js"><link rel="prefetch" href="/fes.js/assets/js/104.86034148.js"><link rel="prefetch" href="/fes.js/assets/js/105.3bb92ea5.js"><link rel="prefetch" href="/fes.js/assets/js/106.1df0d2ff.js"><link rel="prefetch" href="/fes.js/assets/js/107.b4c899e6.js"><link rel="prefetch" href="/fes.js/assets/js/108.5d6f1cb6.js"><link rel="prefetch" href="/fes.js/assets/js/109.3ed5c334.js"><link rel="prefetch" href="/fes.js/assets/js/11.f26621ac.js"><link rel="prefetch" href="/fes.js/assets/js/110.dce23dd6.js"><link rel="prefetch" href="/fes.js/assets/js/111.2476f0f8.js"><link rel="prefetch" href="/fes.js/assets/js/112.bd22c4d5.js"><link rel="prefetch" href="/fes.js/assets/js/113.ca15de1c.js"><link rel="prefetch" href="/fes.js/assets/js/114.957579ae.js"><link rel="prefetch" href="/fes.js/assets/js/115.024593d0.js"><link rel="prefetch" href="/fes.js/assets/js/116.d5cddf01.js"><link rel="prefetch" href="/fes.js/assets/js/117.046ca7d6.js"><link rel="prefetch" href="/fes.js/assets/js/118.11815117.js"><link rel="prefetch" href="/fes.js/assets/js/119.b20cef58.js"><link rel="prefetch" href="/fes.js/assets/js/12.85a9013e.js"><link rel="prefetch" href="/fes.js/assets/js/120.bcc0046b.js"><link rel="prefetch" href="/fes.js/assets/js/121.5670d1e6.js"><link rel="prefetch" href="/fes.js/assets/js/122.7a268c65.js"><link rel="prefetch" href="/fes.js/assets/js/123.91d512e1.js"><link rel="prefetch" href="/fes.js/assets/js/124.b184f22d.js"><link rel="prefetch" href="/fes.js/assets/js/125.2e43132d.js"><link rel="prefetch" href="/fes.js/assets/js/126.ee7d5e3d.js"><link rel="prefetch" href="/fes.js/assets/js/127.45531c4f.js"><link rel="prefetch" href="/fes.js/assets/js/128.32f0a2e5.js"><link rel="prefetch" href="/fes.js/assets/js/129.ef73662a.js"><link rel="prefetch" href="/fes.js/assets/js/13.15a3084c.js"><link rel="prefetch" href="/fes.js/assets/js/130.8df92d78.js"><link rel="prefetch" href="/fes.js/assets/js/131.f76b7077.js"><link rel="prefetch" href="/fes.js/assets/js/132.0af231cd.js"><link rel="prefetch" href="/fes.js/assets/js/133.d597ece5.js"><link rel="prefetch" href="/fes.js/assets/js/134.92e05e2b.js"><link rel="prefetch" href="/fes.js/assets/js/135.9fb556eb.js"><link rel="prefetch" href="/fes.js/assets/js/136.1f72abea.js"><link rel="prefetch" href="/fes.js/assets/js/137.56bccf1e.js"><link rel="prefetch" href="/fes.js/assets/js/138.5a51bcda.js"><link rel="prefetch" href="/fes.js/assets/js/139.b4c67904.js"><link rel="prefetch" href="/fes.js/assets/js/14.4deadb95.js"><link rel="prefetch" href="/fes.js/assets/js/140.cb5be1e8.js"><link rel="prefetch" href="/fes.js/assets/js/141.8ac7a23e.js"><link rel="prefetch" href="/fes.js/assets/js/142.18fed108.js"><link rel="prefetch" href="/fes.js/assets/js/143.770929a1.js"><link rel="prefetch" href="/fes.js/assets/js/144.6575df5c.js"><link rel="prefetch" href="/fes.js/assets/js/145.577f2f6b.js"><link rel="prefetch" href="/fes.js/assets/js/146.185eeeb6.js"><link rel="prefetch" href="/fes.js/assets/js/147.600622ee.js"><link rel="prefetch" href="/fes.js/assets/js/148.ed0ee1ce.js"><link rel="prefetch" href="/fes.js/assets/js/149.96e5521b.js"><link rel="prefetch" href="/fes.js/assets/js/150.7182a2d1.js"><link rel="prefetch" href="/fes.js/assets/js/151.026f2738.js"><link rel="prefetch" href="/fes.js/assets/js/152.a81d4dfe.js"><link rel="prefetch" href="/fes.js/assets/js/153.4b22b740.js"><link rel="prefetch" href="/fes.js/assets/js/154.772272fb.js"><link rel="prefetch" href="/fes.js/assets/js/155.92d8f811.js"><link rel="prefetch" href="/fes.js/assets/js/156.220bfbea.js"><link rel="prefetch" href="/fes.js/assets/js/157.8807b8cc.js"><link rel="prefetch" href="/fes.js/assets/js/158.3c945605.js"><link rel="prefetch" href="/fes.js/assets/js/159.3c226b1b.js"><link rel="prefetch" href="/fes.js/assets/js/16.21608533.js"><link rel="prefetch" href="/fes.js/assets/js/160.5e21b174.js"><link rel="prefetch" href="/fes.js/assets/js/161.585be5a8.js"><link rel="prefetch" href="/fes.js/assets/js/162.df94370a.js"><link rel="prefetch" href="/fes.js/assets/js/163.a72fddff.js"><link rel="prefetch" href="/fes.js/assets/js/164.a99e2d54.js"><link rel="prefetch" href="/fes.js/assets/js/165.1b64cb5a.js"><link rel="prefetch" href="/fes.js/assets/js/166.b864ebc8.js"><link rel="prefetch" href="/fes.js/assets/js/167.9f5457b2.js"><link rel="prefetch" href="/fes.js/assets/js/168.31c84839.js"><link rel="prefetch" href="/fes.js/assets/js/169.fd9ef1ad.js"><link rel="prefetch" href="/fes.js/assets/js/17.628e539d.js"><link rel="prefetch" href="/fes.js/assets/js/170.3fc4f24a.js"><link rel="prefetch" href="/fes.js/assets/js/171.2c85e346.js"><link rel="prefetch" href="/fes.js/assets/js/172.811f8353.js"><link rel="prefetch" href="/fes.js/assets/js/173.da8fc25b.js"><link rel="prefetch" href="/fes.js/assets/js/174.a10e3d95.js"><link rel="prefetch" href="/fes.js/assets/js/175.5b6b9f95.js"><link rel="prefetch" href="/fes.js/assets/js/176.9ae11d97.js"><link rel="prefetch" href="/fes.js/assets/js/177.263c7c05.js"><link rel="prefetch" href="/fes.js/assets/js/178.8af820ff.js"><link rel="prefetch" href="/fes.js/assets/js/179.340f2124.js"><link rel="prefetch" href="/fes.js/assets/js/18.f74c470d.js"><link rel="prefetch" href="/fes.js/assets/js/180.1721f39e.js"><link rel="prefetch" href="/fes.js/assets/js/181.362ec251.js"><link rel="prefetch" href="/fes.js/assets/js/182.8be6f10c.js"><link rel="prefetch" href="/fes.js/assets/js/183.e0094e6b.js"><link rel="prefetch" href="/fes.js/assets/js/184.4ded5010.js"><link rel="prefetch" href="/fes.js/assets/js/185.ecfa04cc.js"><link rel="prefetch" href="/fes.js/assets/js/186.d85e6338.js"><link rel="prefetch" href="/fes.js/assets/js/187.45ee0ff9.js"><link rel="prefetch" href="/fes.js/assets/js/188.455e3ba7.js"><link rel="prefetch" href="/fes.js/assets/js/189.99089212.js"><link rel="prefetch" href="/fes.js/assets/js/19.adb191bd.js"><link rel="prefetch" href="/fes.js/assets/js/190.8db6e175.js"><link rel="prefetch" href="/fes.js/assets/js/191.58e5c5e5.js"><link rel="prefetch" href="/fes.js/assets/js/20.3c4a8246.js"><link rel="prefetch" href="/fes.js/assets/js/21.bceab9c1.js"><link rel="prefetch" href="/fes.js/assets/js/22.b9c001d7.js"><link rel="prefetch" href="/fes.js/assets/js/23.c3c204bd.js"><link rel="prefetch" href="/fes.js/assets/js/24.727208d4.js"><link rel="prefetch" href="/fes.js/assets/js/25.90ae11fd.js"><link rel="prefetch" href="/fes.js/assets/js/26.30023c0d.js"><link rel="prefetch" href="/fes.js/assets/js/27.81a4b14d.js"><link rel="prefetch" href="/fes.js/assets/js/28.57f73fbb.js"><link rel="prefetch" href="/fes.js/assets/js/29.fd64021e.js"><link rel="prefetch" href="/fes.js/assets/js/3.5e11613d.js"><link rel="prefetch" href="/fes.js/assets/js/30.76efdf4f.js"><link rel="prefetch" href="/fes.js/assets/js/31.e869900c.js"><link rel="prefetch" href="/fes.js/assets/js/32.b2e26eb6.js"><link rel="prefetch" href="/fes.js/assets/js/33.747fbc03.js"><link rel="prefetch" href="/fes.js/assets/js/34.de9ee359.js"><link rel="prefetch" href="/fes.js/assets/js/35.fec8dc48.js"><link rel="prefetch" href="/fes.js/assets/js/36.3bc574d9.js"><link rel="prefetch" href="/fes.js/assets/js/37.6bc69c79.js"><link rel="prefetch" href="/fes.js/assets/js/38.58d126e9.js"><link rel="prefetch" href="/fes.js/assets/js/39.c5630ef0.js"><link rel="prefetch" href="/fes.js/assets/js/4.8aad18e1.js"><link rel="prefetch" href="/fes.js/assets/js/40.b0d45bd4.js"><link rel="prefetch" href="/fes.js/assets/js/41.5389b6cf.js"><link rel="prefetch" href="/fes.js/assets/js/42.08a733d0.js"><link rel="prefetch" href="/fes.js/assets/js/43.faa7983a.js"><link rel="prefetch" href="/fes.js/assets/js/44.b9392e16.js"><link rel="prefetch" href="/fes.js/assets/js/45.c8f02fd6.js"><link rel="prefetch" href="/fes.js/assets/js/46.70c14108.js"><link rel="prefetch" href="/fes.js/assets/js/47.be381f75.js"><link rel="prefetch" href="/fes.js/assets/js/48.23b5f25e.js"><link rel="prefetch" href="/fes.js/assets/js/49.c8f41428.js"><link rel="prefetch" href="/fes.js/assets/js/5.ef7cb79c.js"><link rel="prefetch" href="/fes.js/assets/js/50.6b3a205c.js"><link rel="prefetch" href="/fes.js/assets/js/51.952169d3.js"><link rel="prefetch" href="/fes.js/assets/js/52.aa7f7958.js"><link rel="prefetch" href="/fes.js/assets/js/53.0c06e959.js"><link rel="prefetch" href="/fes.js/assets/js/54.7c361990.js"><link rel="prefetch" href="/fes.js/assets/js/55.fc8c73f5.js"><link rel="prefetch" href="/fes.js/assets/js/56.9f4b303c.js"><link rel="prefetch" href="/fes.js/assets/js/57.5750a64c.js"><link rel="prefetch" href="/fes.js/assets/js/58.fafee21e.js"><link rel="prefetch" href="/fes.js/assets/js/59.d3c586c7.js"><link rel="prefetch" href="/fes.js/assets/js/6.1f8c31c8.js"><link rel="prefetch" href="/fes.js/assets/js/60.6b493d4c.js"><link rel="prefetch" href="/fes.js/assets/js/61.6d4baf8a.js"><link rel="prefetch" href="/fes.js/assets/js/62.7a25fd87.js"><link rel="prefetch" href="/fes.js/assets/js/63.5e270828.js"><link rel="prefetch" href="/fes.js/assets/js/64.b17abb2c.js"><link rel="prefetch" href="/fes.js/assets/js/65.ecb4d044.js"><link rel="prefetch" href="/fes.js/assets/js/66.214baade.js"><link rel="prefetch" href="/fes.js/assets/js/67.e98811c2.js"><link rel="prefetch" href="/fes.js/assets/js/68.0b88d471.js"><link rel="prefetch" href="/fes.js/assets/js/69.37a9f9dc.js"><link rel="prefetch" href="/fes.js/assets/js/7.154f06b1.js"><link rel="prefetch" href="/fes.js/assets/js/70.b9276e8b.js"><link rel="prefetch" href="/fes.js/assets/js/71.ec413e60.js"><link rel="prefetch" href="/fes.js/assets/js/72.9b78f34a.js"><link rel="prefetch" href="/fes.js/assets/js/73.5cc116e1.js"><link rel="prefetch" href="/fes.js/assets/js/74.ed3f9134.js"><link rel="prefetch" href="/fes.js/assets/js/75.0ac19e88.js"><link rel="prefetch" href="/fes.js/assets/js/76.8fe79f15.js"><link rel="prefetch" href="/fes.js/assets/js/77.011411bc.js"><link rel="prefetch" href="/fes.js/assets/js/78.932d3724.js"><link rel="prefetch" href="/fes.js/assets/js/79.e5e592c9.js"><link rel="prefetch" href="/fes.js/assets/js/8.6a1e4d2c.js"><link rel="prefetch" href="/fes.js/assets/js/80.87be71a6.js"><link rel="prefetch" href="/fes.js/assets/js/81.55e1c975.js"><link rel="prefetch" href="/fes.js/assets/js/82.ab36fade.js"><link rel="prefetch" href="/fes.js/assets/js/83.14cd3a8f.js"><link rel="prefetch" href="/fes.js/assets/js/84.f413793b.js"><link rel="prefetch" href="/fes.js/assets/js/85.cf1d54c8.js"><link rel="prefetch" href="/fes.js/assets/js/86.9867ea44.js"><link rel="prefetch" href="/fes.js/assets/js/87.7d9d9c02.js"><link rel="prefetch" href="/fes.js/assets/js/88.1fb3748f.js"><link rel="prefetch" href="/fes.js/assets/js/89.c338aa8d.js"><link rel="prefetch" href="/fes.js/assets/js/9.fc7e7822.js"><link rel="prefetch" href="/fes.js/assets/js/90.5aa004be.js"><link rel="prefetch" href="/fes.js/assets/js/91.52c4697f.js"><link rel="prefetch" href="/fes.js/assets/js/92.876ffbbe.js"><link rel="prefetch" href="/fes.js/assets/js/93.0fc5d2e3.js"><link rel="prefetch" href="/fes.js/assets/js/94.159fad62.js"><link rel="prefetch" href="/fes.js/assets/js/95.a7ba2e4a.js"><link rel="prefetch" href="/fes.js/assets/js/96.7e1c7796.js"><link rel="prefetch" href="/fes.js/assets/js/97.171b9202.js"><link rel="prefetch" href="/fes.js/assets/js/98.13a9a6a3.js"><link rel="prefetch" href="/fes.js/assets/js/99.81556285.js">
<link rel="stylesheet" href="/fes.js/assets/css/0.styles.54a65285.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container comp-page-class"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/fes.js/" class="home-link router-link-active"><!----> <span class="site-name">Fes.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/fes.js/guide/" class="nav-link">
指南
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
API参考
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link router-link-active">
组件
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
CLI
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/fes.js/guide/" class="nav-link">
指南
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
API参考
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link router-link-active">
组件
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
CLI
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/fes.js/ui/" aria-current="page" class="sidebar-link">Install 安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组件库</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/fes.js/ui/layout.html" class="sidebar-link">Layout 栅格</a></li><li><a href="/fes.js/ui/icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="/fes.js/ui/button.html" class="sidebar-link">Button 按钮</a></li><li><a href="/fes.js/ui/menu.html" class="sidebar-link">Menu 导航菜单</a></li><li><a href="/fes.js/ui/dropdown.html" class="sidebar-link">Dropdown 下拉菜单</a></li><li><a href="/fes.js/ui/contextmenu.html" class="sidebar-link">Contextmenu 右键菜单</a></li><li><a href="/fes.js/ui/collapse.html" class="sidebar-link">Collapse 折叠面板</a></li><li><a href="/fes.js/ui/tab.html" class="sidebar-link">Tabs 标签页</a></li><li><a href="/fes.js/ui/table.html" class="sidebar-link">Table 表格</a></li><li><a href="/fes.js/ui/pagination.html" class="sidebar-link">Pagination 分页</a></li><li><a href="/fes.js/ui/panel.html" class="sidebar-link">Panel 面板</a></li><li><a href="/fes.js/ui/tree.html" class="sidebar-link">Tree 树形控件</a></li><li><a href="/fes.js/ui/step.html" class="sidebar-link">Step 步骤条</a></li><li><a href="/fes.js/ui/zoom.html" class="sidebar-link">Zoom 图片放大镜</a></li><li><a href="/fes.js/ui/carousel.html" class="sidebar-link">Carousel 轮播</a></li><li><a href="/fes.js/ui/toast.html" class="sidebar-link">Toast 全局提示</a></li><li><a href="/fes.js/ui/message.html" class="sidebar-link">Message 提示</a></li><li><a href="/fes.js/ui/modal.html" class="sidebar-link">Modal 模态框</a></li><li><a href="/fes.js/ui/tooltip.html" class="sidebar-link">Tooltip 文本提示</a></li><li><a href="/fes.js/ui/loading.html" class="sidebar-link">Loading 加载中</a></li><li><a href="/fes.js/ui/process-circle.html" class="sidebar-link">processCircle 进度环</a></li><li><a href="/fes.js/ui/input.html" class="sidebar-link">Input 输入框</a></li><li><a href="/fes.js/ui/select.html" class="sidebar-link">Select 选择器</a></li><li><a href="/fes.js/ui/radio.html" class="sidebar-link">Radio 单选</a></li><li><a href="/fes.js/ui/checkbox.html" class="sidebar-link">Checkbox 多选</a></li><li><a href="/fes.js/ui/datePicker.html" aria-current="page" class="active sidebar-link">DatePicker 日期选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/ui/datePicker.html#概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header"><a href="/fes.js/ui/datePicker.html#代码示例" class="sidebar-link">代码示例</a></li><li class="sidebar-sub-header"><a href="/fes.js/ui/datePicker.html#api" class="sidebar-link">API</a></li></ul></li><li><a href="/fes.js/ui/timePicker.html" class="sidebar-link">TimePicker 时间选择</a></li><li><a href="/fes.js/ui/switch.html" class="sidebar-link">Switch 开关</a></li><li><a href="/fes.js/ui/form.html" class="sidebar-link">Form 表单</a></li><li><a href="/fes.js/ui/upload.html" class="sidebar-link">Upload 上传</a></li><li><a href="/fes.js/ui/backTop.html" class="sidebar-link">BackTop 回到顶部</a></li><li><a href="/fes.js/ui/draggable.html" class="sidebar-link">Draggable 拖拽</a></li><li><a href="/fes.js/ui/split.html" class="sidebar-link">split 分割面板</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="datepicker-日期选择器"><a href="#datepicker-日期选择器" class="header-anchor">#</a> DatePicker 日期选择器</h1> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。</p> <h2 id="代码示例"><a href="#代码示例" class="header-anchor">#</a> 代码示例</h2> <!----> <h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2> <h3 id="inputdatepicker-和-datepicker-共有的-props"><a href="#inputdatepicker-和-datepicker-共有的-props" class="header-anchor">#</a> InputDatePicker 和 DatePicker 共有的 Props</h3> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">value</td> <td style="text-align:left;">日期的值可以使用v-model实现数据的双向绑定</td> <td style="text-align:left;">Date、Array、Number</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">model</td> <td style="text-align:left;">模式,可选值有<code>single</code><code>range</code><code>multiple</code></td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code>single</code></td></tr> <tr><td style="text-align:left;">format</td> <td style="text-align:left;">时间格式YYYY-MM-DD HH:mm:ss</td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code>YYYY-MM-DD</code></td></tr> <tr><td style="text-align:left;">maxDate</td> <td style="text-align:left;">最大可选时间</td> <td style="text-align:left;">Date</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">minDate</td> <td style="text-align:left;">最小可选时间</td> <td style="text-align:left;">Date</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">maxRange</td> <td style="text-align:left;">最大可选区间,格式为 /\d+[DMY]/</td> <td style="text-align:left;">String</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">disable</td> <td style="text-align:left;">禁止的时间,格式可以为:[Date, Function, {from: Date, to: Date}]</td> <td style="text-align:left;">Array</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">enable</td> <td style="text-align:left;">可用的时间,格式可以为:[Date, Function, {from: Date, to: Date}]</td> <td style="text-align:left;">Array</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">disabledDate</td> <td style="text-align:left;">禁止时间函数,参数为对应的时间 Date执行结果为true则禁止</td> <td style="text-align:left;">Function</td> <td style="text-align:left;">null</td></tr> <tr><td style="text-align:left;">rangeSeparator</td> <td style="text-align:left;">区间选择中间的分割符号,只在 model 为 range 时生效</td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code></code></td></tr> <tr><td style="text-align:left;">showConfirm</td> <td style="text-align:left;">是否显示确认按钮在多选强制为true其他情况默认为 false</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">onlyMonth</td> <td style="text-align:left;">是否只选择月份(兼容老的API尽量使用 format代替)</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">enableTime</td> <td style="text-align:left;">是否显示时间(兼容老的API尽量使用 format代替)</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">enableSeconds</td> <td style="text-align:left;">是否显示秒(兼容老的API尽量使用 format代替)</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr></tbody></table> <h3 id="inputdatepicker-props"><a href="#inputdatepicker-props" class="header-anchor">#</a> InputDatePicker Props</h3> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">placeholder</td> <td style="text-align:left;">未选择时间时的提示语</td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code>请选择日期</code></td></tr> <tr><td style="text-align:left;">icon</td> <td style="text-align:left;">输入框左边的 icon</td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code>calendar</code></td></tr> <tr><td style="text-align:left;">clearable</td> <td style="text-align:left;">是否显示清除 icon</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">position</td> <td style="text-align:left;">弹窗的位置,会根据窗口大小自适应,可选值<code>bottomLeft</code> <code>bottomRight</code> <code>topLeft</code> <code>topRight</code></td> <td style="text-align:left;">String</td> <td style="text-align:left;"><code>bottomLeft</code></td></tr> <tr><td style="text-align:left;">readonly</td> <td style="text-align:left;">是否只读</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">disabled</td> <td style="text-align:left;">是否禁用</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td></tr></tbody></table> <h3 id="inputdatepicker-events"><a href="#inputdatepicker-events" class="header-anchor">#</a> InputDatePicker Events</h3> <table><thead><tr><th style="text-align:left;">事件名</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">返回值</th></tr></thead> <tbody><tr><td style="text-align:left;">on-input</td> <td style="text-align:left;">输入时触发</td> <td style="text-align:left;">(value) =&gt; void</td></tr> <tr><td style="text-align:left;">on-change</td> <td style="text-align:left;">值改变时触发</td> <td style="text-align:left;">(value) =&gt; void</td></tr> <tr><td style="text-align:left;">on-enter</td> <td style="text-align:left;">焦点在input, 按下enter键触发</td> <td style="text-align:left;">(event) =&gt; void</td></tr> <tr><td style="text-align:left;">on-focus</td> <td style="text-align:left;">获取焦点时触发</td> <td style="text-align:left;">(event) =&gt; void</td></tr> <tr><td style="text-align:left;">on-blur</td> <td style="text-align:left;">失去焦点时触发</td> <td style="text-align:left;">(event) =&gt; void</td></tr> <tr><td style="text-align:left;">on-blur</td> <td style="text-align:left;">失去焦点时触发</td> <td style="text-align:left;">(event) =&gt; void</td></tr></tbody></table> <h3 id="datepicker-props"><a href="#datepicker-props" class="header-anchor">#</a> DatePicker Props</h3> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">inline</td> <td style="text-align:left;">是否脱离文档流ture则用relative定位false则用absolute定位</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td></tr></tbody></table> <h3 id="datepicker-events"><a href="#datepicker-events" class="header-anchor">#</a> DatePicker Events</h3> <table><thead><tr><th style="text-align:left;">事件名</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">返回值</th></tr></thead> <tbody><tr><td style="text-align:left;">on-change</td> <td style="text-align:left;">值改变时触发</td> <td style="text-align:left;">(value) =&gt; void</td></tr> <tr><td style="text-align:left;">on-finish</td> <td style="text-align:left;">选择结束触发</td> <td style="text-align:left;">() =&gt; void</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次编辑时间:</span> <span class="time">11/27/2020, 3:38:53 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/fes.js/ui/checkbox.html" class="prev">
Checkbox 多选
</a></span> <span class="next"><a href="/fes.js/ui/timePicker.html">
TimePicker 时间选择
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/fes.js/assets/js/app.d4a34833.js" defer></script><script src="/fes.js/assets/js/2.1380c702.js" defer></script><script src="/fes.js/assets/js/15.43f80fe4.js" defer></script><script src="/fes.js/assets/js/10.2329d47f.js" defer></script>
</body>
</html>