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

Calendar \u65E5\u5386

\u4ECB\u7ECD

\u65E5\u5386\uFF0C\u53EF\u5E73\u94FA/\u5F39\u7A97\u5C55\u793A

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Calendar,Popup } from '@nutui/nutui';
// taro
import { Calendar,Popup } from '@nutui/nutui-taro';

const app = createApp();
app.use(Calendar);
app.use(Popup);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-cell
  :showIcon="true"
  title="\u9009\u62E9\u5355\u4E2A\u65E5\u671F"
  :desc="date ? \`\${date} \${dateWeek}\` : '\u8BF7\u9009\u62E9'"
  @click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
  v-model:visible="isVisible"
  :default-value="date"
  @close="closeSwitch('isVisible')"
  @choose="setChooseValue"
  :start-date="\`2019-10-11\`"
  :end-date="\`2022-11-11\`"
>
</nut-calendar>

setup() {
    const state: TestCalendarState = reactive({
      isVisible: false,
      date: '',
      dateWeek: ''
    });
    const openSwitch = param => {
      state[\`\${param}\`] = true;
    };
    const closeSwitch = param => {
      state[\`\${param}\`] = false;
    };
    const setChooseValue = param => {
      state.date = param[3];
      state.dateWeek = param[4];
    };
    return {
      ...toRefs(state),
      openSwitch,
      closeSwitch,
      setChooseValue
    };
  }

\u533A\u95F4\u9009\u62E9

<nut-cell
  :showIcon="true"
  title="\u9009\u62E9\u65E5\u671F\u533A\u95F4"
  :desc="date ? \`\${date[0]}\u81F3\${date[1]}\` : '\u8BF7\u9009\u62E9'"
  @click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
  v-model:visible="isVisible"
  :default-value="date"
  type="range"
  :start-date="\`2019-12-22\`"
  :end-date="\`2021-01-08\`"
  @close="closeSwitch('isVisible')"
  @choose="setChooseValue"
>
</nut-calendar>

setup() {
    const state: TestCalendarState = reactive({
      date: ['2019-12-23', '2019-12-26'],
      isVisible2: true
    });
    const openSwitch = param => {
      state[\`\${param}\`] = true;
    };
    const closeSwitch = param => {
      state[\`\${param}\`] = false;
    };
    const setChooseValue= param => {
      state.date = [...[param[0][3], param[1][3]]];
    };
    return {
      ...toRefs(state),
      openSwitch,
      closeSwitch,
      setChooseValue,
    };
  }

\u81EA\u5B9A\u4E49\u65E5\u5386-\u81EA\u52A8\u56DE\u586B

<nut-cell
  :showIcon="true"
  title="\u9009\u62E9\u65E5\u671F"
  :desc="date ? date : '\u8BF7\u9009\u62E9'"
  @click="openSwitch('isVisible')"
>
</nut-cell>
<nut-calendar
  v-model:visible="isVisible"
  @close="closeSwitch('isVisible')"
  @choose="setChooseValue"
  :start-date="null"
  :end-date="null"
  :is-auto-back-fill="true"
>
</nut-calendar>

setup() {
    const state: TestCalendarState = reactive({
      date: '',
      isVisible: false
    });
    const openSwitch = param => {
      state[\`\${param}\`] = true;
    };
    const closeSwitch = param => {
      state[\`\${param}\`] = false;
    };
     const setChooseValue = param => {
      state.date= param[3];
    };
    return {
      ...toRefs(state),
      setChooseValue
    };
  }

\u5E73\u94FA\u5C55\u793A

<div class="test-calendar-wrapper">
  <nut-calendar
    :poppable="false"
    :is-auto-back-fill="true"
    :default-value="date"
    @choose="setChooseValue"
  >
  </nut-calendar
></div>

setup() {
    const state: TestCalendarState = reactive({
      date: '2020-07-08'
    });
    const setChooseValue = param => {
      state.date = param[3];
    };
    return {
      ...toRefs(state),
      setChooseValue
    };
  }

\u57FA\u7840\u7528\u6CD5

API

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model:visible	\u662F\u5426\u53EF\u89C1	Boolean	false
type	\u7C7B\u578B\uFF0C\u65E5\u671F\u9009\u62E9\u2019one\u2019\uFF0C\u533A\u95F4\u9009\u62E9\u2019range\u2019	String	\u2018one\u2019
poppable	\u662F\u5426\u5F39\u7A97\u72B6\u6001\u5C55\u793A	Boolean	true
is-auto-back-fill	\u81EA\u52A8\u56DE\u586B	Boolean	false
title	\u663E\u793A\u6807\u9898	String	\u2018\u65E5\u671F\u9009\u62E9\u2019
default-value	\u9ED8\u8BA4\u503C\uFF0C\u65E5\u671F\u9009\u62E9 String \u683C\u5F0F\uFF0C\u533A\u95F4\u9009\u62E9 Array \u683C\u5F0F	String \u3001 Array	null
start-date	\u5F00\u59CB\u65E5\u671F\uFF0C \u5982\u679C\u4E0D\u9650\u5236\u5F00\u59CB\u65E5\u671F\u4F20 null	String	\u4ECA\u5929
end-date	\u7ED3\u675F\u65E5\u671F\uFF0C\u5982\u679C\u4E0D\u9650\u5236\u7ED3\u675F\u65E5\u671F\u4F20 null	String	\u8DDD\u79BB\u4ECA\u5929 365 \u5929

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
choose	\u9009\u62E9\u4E4B\u540E\u6216\u662F\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u89E6\u53D1	\u65E5\u671F\u6570\u7EC4\uFF08\u5305\u542B\u5E74\u6708\u65E5\u548C\u661F\u671F\uFF09
close	\u5173\u95ED\u65F6\u89E6\u53D1	-

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