**根據uViewUI組件文檔來寫** >1. 平臺差異說明 >2. 基本使用 >3. API：Props，Slot，Event **舉例：** ## Calendar 日歷1.3.0(https://uviewui.com/components/calendar.html#api) 此組件用于單個選擇日期，范圍選擇日期等，日歷被包裹在底部彈起的容器中。 **注意：** 此組件與[Picker 選擇器](https://uviewui.com/components/picker.html)的日期選擇模式有一定的重合之處，區別在于本組件為更專業的日期選擇場景，能選擇日期范圍等。 另外`Picker`組件的日期模式可以配置更多的參數，如時、分、秒等，可以根據不同的使用場景進行選擇。 ### 平臺差異說明 | App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 | 頭條小程序 | QQ小程序 | | --- | --- | --- | --- | --- | --- | --- | | √ | √ | √ | √ | √ | √ | √ | ### 基本使用 * 通過`v-model`綁定一個布爾變量用于打開或收起日歷彈窗。 * 通過`mode`參數指定選擇單個日期，還是選擇日期范圍。 ~~~ <template> <view> <u-calendar v-model="show" :mode="mode"></u-calendar> <u-button @click="show = true">打開</u-button> </view> </template> <script> export default { data() { return { show: false, mode: 'date' } } } </script> ~~~ ### 日歷模式 * `mode`為`date`只能選擇單個日期 * `mode`為`range`可以選擇日期范圍 ### [#](https://uviewui.com/components/calendar.html#%E5%8D%95%E4%B8%AA%E6%97%A5%E6%9C%9F%E6%A8%A1%E5%BC%8F)單個日期模式 選擇日期后，需要點擊底部的`確定`按鈕才能觸發回調事件，回調參數為一個對象，有如下屬性： ~~~ { day: 4, // 選擇了哪一天 days: 30, // 這個月份有多少天 isToday: true, // 選擇的日期是否今天 month: 6, // 選擇的月份 result: "2020-06-04", // 選擇的日期整體值 week: "星期四", // 選擇日期所屬的星期數 year: 2020 , // 選擇的年份 } ~~~ 示例代碼： ~~~ <template> <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar> </template> <script> export default { data() { return { show: true, mode: 'date' } }, methods: { change(e) { console.log(e); } } } </script> ~~~ ### 日期范圍模式 此模式用于選擇一個日期范圍，比如住酒店的入住到離店的日期范圍，有如下可配置的參數： * `active-bg-color`參數配置起始/結束日期按鈕的背景色 * `active-color`參數配置起始/結束日期按鈕的字體顏色 * `range-bg-color`參數配置起始/結束日期之間的區域的背景顏色，默認為`rgba(41,121,255,0.13)`，為淺藍色 * `start-text`參數用于設置起始日期底部的提示文字，如"住店" * `end-text`參數用于設置結束日期底部的提示文字，如"離店" 此模式的返回參數如下： ~~~ { endDate: "2020-06-04", // 選擇的結束日期 endDay: 4, // 結束日期是哪一天 endMonth: 6, // 結束日期的月份 endWeek: "星期四", // 結束日期的星期數 endYear: 2020, // 結束日期的年份 startDate: "2020-06-01", // 選擇的起始日期 startDay: 1, // 起始日期是哪一天 startMonth: 6, // 起始日期的月份 startWeek: "星期一", // 起始日期的星期數 startYear: 2020 // 起始日期的年份 } ~~~ 示例代碼： ~~~ <template> <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar> </template> <script> export default { data() { return { show: true, mode: 'range' } }, methods: { change(e) { console.log(e); } } } </script> ~~~ ### 自定義內容 組件有一個默認插槽，名為`tooltip`，傳入的內容將會顯示在鍵盤的頂部位置，如使用，需要為傳入的內容自定義樣式。 ~~~ <template> <u-calendar v-model="show" :mode="mode" @change="change"> <view slot="tooltip"> <view class="title"> 請選擇住店/離店時間 </view> </view> </u-calendar> </template> <script> export default { data() { return { show: true, mode: 'range' } }, methods: { change(e) { console.log(e); } } } </script> <style lang="scss" scoped> .title{ color: $u-type-primary; text-align: center; padding: 20rpx 0 0 0; } </style> ~~~ ### API ### Props | 參數 | 說明 | 類型 | 默認值 | 可選值 | | --- | --- | --- | --- | --- | | mode | 選擇日期的模式，date-為單個日期，range-為選擇日期范圍 | String | date | range | | v-model | 布爾值變量，用于控制日歷的彈出與收起 | Boolean | false | true | | safe-area-inset-bottom | 是否開啟[底部安全區適配](https://uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E) | Boolean | false | true | | change-year | 是否顯示頂部的切換年份方向的按鈕 | Boolean | true | false | | change-month | 是否顯示頂部的切換月份方向的按鈕 | Boolean | true | false | | max-year | 可切換的最大年份 | Number | String | 2050 | \- | | min-year | 可切換的最小年份 | Number | String | 1950 | \- | | min-date | 最小可選日期 | Number | String | 1950-01-01 | \- | | max-date | 最大可選日期 | Number | String | 當前日期 | \- | | border-radius | 彈窗頂部左右兩邊的圓角值，單位rpx | Number | String | 20 | \- | | mask-close-able | 是否允許通過點擊遮罩關閉日歷 | Boolean | true | false | | month-arrow-color | 月份切換按鈕箭頭顏色 | String | #606266 | \- | | year-arrow-color | 年份切換按鈕箭頭顏色 | String | #909399 | \- | | color | 日期字體的默認顏色 | String | #303133 | \- | | active-bg-color | 起始/結束日期按鈕的背景色 | String | #2979ff | \- | | z-index | 彈出時的`z-index`值 | String | Number | 10075 | \- | | active-color | 起始/結束日期按鈕的字體顏色 | String | #ffffff | \- | | range-bg-color | 起始/結束日期之間的區域的背景顏色 | String | rgba(41,121,255,0.13) | \- | | range-color | 選擇范圍內字體顏色 | String | #2979ff | \- | | start-text | 起始日期底部的提示文字 | String | 開始 | \- | | end-text | 結束日期底部的提示文字 | String | 結束 | \- | | btn-type | 底部確定按鈕的主題 | String | primary | default / success / info/ warning / error | | toolTip | 頂部提示文字，如設置名為`tooltip`的`slot`，此參數將失效 | String | 選擇日期 | \- | | closeable | 是否顯示右上角的關閉圖標 | Boolean | true | false | ### Slot | 名稱 | 說明 | | --- | --- | | tooltip | 自定義日歷頂部的內容 | ### Event | 事件名 | 說明 | 回調參數 | | --- | --- | --- | | change | 點擊右上角`確定`按鈕時觸發 | 選擇日期相關的返回參數 |