import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Datepicker \u65E5\u671F\u9009\u62E9\u5668

\u4ECB\u7ECD

\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u652F\u6301\u65E5\u671F\u3001\u5E74\u6708\u3001\u65F6\u5206\u7B49\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { DatePicker } from '@nutui/nutui';

const app = createApp();
app.use(DatePicker);

\u4EE3\u7801\u6F14\u793A

\u65E5\u671F\u9009\u62E9-\u6BCF\u5217\u4E0D\u663E\u793A\u4E2D\u6587

<nut-datepicker
    v-model="currentDate"
    @confirm="confirm"
    v-model:visible="show"
    :is-show-chinese="false"
></nut-datepicker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020-1-1');

    return {
      show,
      desc
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>

\u65E5\u671F\u9009\u62E9-\u9650\u5236\u5F00\u59CB\u7ED3\u675F\u65F6\u95F4

<nut-datepicker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="confirm"
    v-model:visible="show"
    :is-show-chinese="false"
></nut-datepicker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020-1-1');

    return {
      show,
      desc,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>

\u65E5\u671F\u65F6\u95F4-\u9650\u5236\u5F00\u59CB\u7ED3\u675F\u65F6\u95F4\uFF08\u6709\u9ED8\u8BA4\u503C\uFF09

<nut-datepicker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
    type="datetime"
    @confirm="confirm"
    v-model:visible="show" 
></nut-datepicker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020\u5E74-1\u6708-1\u65E5-0\u65F6-0\u5206');

    return {
      show,
      desc,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>

\u65F6\u95F4\u9009\u62E9-12\u5C0F\u65F6\u5236

<nut-datepicker
    v-model="currentDate"
    type="time"
    :min-date="minDate"
    :max-date="maxDate"
    :is-use12-hours="true"
    @confirm="confirm"
    v-model:visible="show"
></nut-datepicker>

\u65F6\u95F4\u9009\u62E9-\u5206\u949F\u6570\u9012\u589E\u6B65\u957F\u8BBE\u7F6E

<nut-datepicker
    v-model="currentDate"
    type="time"
    :minute-step="5"
    :min-date="minDate"
    :max-date="maxDate"
    :is-use12-hours="true"
    @confirm="confirm"
    v-model:visible="show"
></nut-datepicker>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u521D\u59CB\u503C	Date	`null`
v-model:visible	\u662F\u5426\u53EF\u89C1	Boolean	`false`
type	\u7C7B\u578B\uFF0C\u65E5\u671F\u2019date\u2019\uFF0C \u65E5\u671F\u65F6\u95F4\u2019datetime\u2019\uFF0C\u65F6\u95F4\u2019time\u2019	String	`'date'`
is-use12-hours	\u662F\u5426\u5341\u4E8C\u5C0F\u65F6\u5236\u5EA6\uFF0C\u53EA\u9650\u7C7B\u578B\u4E3A\u2019time\u2019\u65F6\u4F7F\u7528	Boolean	`false`
minute-step	\u5206\u949F\u6B65\u8FDB\u503C	Number	`1`
is-show-chinese	\u6BCF\u5217\u662F\u5426\u5C55\u793A\u4E2D\u6587	Boolean	`false`
title	\u8BBE\u7F6E\u6807\u9898	String	`null`
min-date	\u5F00\u59CB\u65E5\u671F	Date	`\u5341\u5E74\u524D`
max-date	\u7ED3\u675F\u65E5\u671F	Date	`\u5341\u5E74\u540E`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
confirm	\u70B9\u51FB\u786E\u5B9A\u6309\u94AE\u65F6\u89E6\u53D1	event: Event
close	\u5173\u95ED\u65F6\u89E6\u53D1	event: Event

`,24),e=[p],j={setup(c,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,e))}};export{j as default};