import{c as t,o as e,C as a}from"./vendor.870c33cc.js";const n={class:"markdown-body"},o=a('

Calendar 日历

介绍

日历，可平铺/弹窗展示

安装

import { createApp } from 'vue';\n//vue\nimport { Calendar } from '@nutui/nutui';\n//taro\nimport { Calendar } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Calendar);\n

代码演示

基础用法

<nut-cell\n  :showIcon="true"\n  title="选择单个日期"\n  :desc="date ? `${date} ${dateWeek}` : '请选择'"\n  @click="openSwitch('isVisible')"\n>\n</nut-cell>\n<nut-calendar\n  v-model:visible="isVisible"\n  :default-value="date"\n  @close="closeSwitch('isVisible')"\n  @choose="setChooseValue"\n  :start-date="`2019-10-11`"\n  :end-date="`2022-11-11`"\n>\n</nut-calendar>\n

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

区间选择

<nut-cell\n  :showIcon="true"\n  title="选择日期区间"\n  :desc="date ? `${date[0]}至${date[1]}` : '请选择'"\n  @click="openSwitch('isVisible')"\n>\n</nut-cell>\n<nut-calendar\n  v-model:visible="isVisible"\n  :default-value="date"\n  type="range"\n  :start-date="`2019-12-22`"\n  :end-date="`2021-01-08`"\n  @close="closeSwitch('isVisible')"\n  @choose="setChooseValue"\n>\n</nut-calendar>\n

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

自定义日历-自动回填

<nut-cell\n  :showIcon="true"\n  title="选择日期"\n  :desc="date ? date : '请选择'"\n  @click="openSwitch('isVisible')"\n>\n</nut-cell>\n<nut-calendar\n  v-model:visible="isVisible"\n  @close="closeSwitch('isVisible')"\n  @choose="setChooseValue"\n  :start-date="null"\n  :end-date="null"\n  :is-auto-back-fill="true"\n>\n</nut-calendar>\n

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

平铺展示

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

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

基础用法

\n

API

Props

字段	说明	类型	默认值
v-model:visible	是否可见	Boolean	false
type	类型，日期选择’one’，区间选择’range’	String	‘one’
poppable	是否弹窗状态展示	Boolean	true
is-auto-back-fill	自动回填	Boolean	false
title	显示标题	String	‘日期选择’
default-value	默认值，日期选择 String 格式，区间选择 Array 格式	String 、 Array	null
start-date	开始日期，如果不限制开始日期传 null	String	今天
end-date	结束日期，如果不限制结束日期传 null	String	距离今天 365 天

Events

事件名	说明	回调参数
choose	选择之后或是点击确认按钮触发	日期数组（包含年月日和星期）
close	关闭时触发	-

',26),s={expose:[],setup:a=>(a,s)=>(e(),t("div",n,[o]))};export default s;