| 1 |
- import{c as t,o as e,C as n}from"./vendor.b05df578.js";const o={class:"markdown-body"},d=n('<h1>Datepicker 日期选择器</h1><h3>介绍</h3><p>时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { DatePicker } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(DatePicker);\n</code></pre><h2>代码演示</h2><h3>日期选择-每列不显示中文</h3><pre><code class="language-html"><nut-datepicker\n v-model="currentDate"\n @confirm="confirm"\n v-model:visible="show"\n :is-show-chinese="false"\n></nut-datepicker> \n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const desc = ref('2020-1-1');\n\n return {\n show,\n desc\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = val.join('-');\n }\n };\n }\n});\n</script>\n</code></pre><h3>日期选择-限制开始结束时间</h3><pre><code class="language-html"><nut-datepicker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n @confirm="confirm"\n v-model:visible="show"\n :is-show-chinese="false"\n></nut-datepicker> \n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const desc = ref('2020-1-1');\n\n return {\n show,\n desc,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 10, 1),\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = val.join('-');\n }\n };\n }\n});\n</script>\n</code></pre><h3>日期时间-限制开始结束时间（有默认值）</h3><pre><code class="language-html"><nut-datepicker\n v-model="currentDate"\n :min-date="minDate"\n :max-date="maxDate"\n type="datetime"\n @confirm="confirm"\n v-model:visible="show" \n></nut-datepicker> \n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const desc = ref('2020年-1月-1日-0时-0分');\n\n return {\n show,\n desc,\n minDate: new Date(2020, 0, 1),\n maxDate: new Date(2025, 10, 1),\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = val.join('-');\n }\n };\n }\n});\n</script>\n</code></pre><h3>时间选择-12小时制</h3><pre><code class="language-html"><nut-datepicker\n v-model="currentDate"\n type="time"\n :min-date="minDate"\n :max-date="maxDate"\n :is-use12-hours="true"\n @confirm="confirm"\n v-model:visible="show"\n></nut-datepicker>\n</code></pre><h3>时间选择-分钟数递增步长设置</h3><pre><code class="language-html"><nut-datepicker\n v-model="currentDate"\n type="time"\n :minute-step="5"\n :min-date="minDate"\n :max-date="maxDate"\n :is-use12-hours="true"\n @confirm="confirm"\n v-model:visible="show"\n></nut-datepicker>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>初始值</td><td>Date</td><td><code>null</code></td></tr><tr><td>v-model:visible</td><td>是否可见</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>type</td><td>类型，日期’date’， 日期时间’datetime’，时间’time’</td><td>String</td><td><code>'date'</code></td></tr><tr><td>is-use12-hours</td><td>是否十二小时制度，只限类型为’time’时使用</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>minute-step</td><td>分钟步进值</td><td>Number</td><td><code>1</code></td></tr><tr><td>is-show-chinese</td><td>每列是否展示中文</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>title</td><td>设置标题</td><td>String</td><td><code>null</code></td></tr><tr><td>min-date</td><td>开始日期</td><td>Date</td><td><code>十年前</code></td></tr><tr><td>max-date</td><td>结束日期</td><td>Date</td><td><code>十年后</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>confirm</td><td>点击确定按钮时触发</td><td>event: Event</td></tr><tr><td>close</td><td>关闭时触发</td><td>event: Event</td></tr></tbody></table>',24),a={setup:n=>(n,a)=>(e(),t("div",o,[d]))};export default a;
|
