按照慣例，先上效果圖
vue-hash-calendar
- 基於 vue 2.X 開發的日歷組件
- 支持手勢滑動操作·1
- 原生 js 開發，沒引入第三方庫
- 上下滑動 切換 周/月 模式
【周模式中】 左右滑動可切換 上一周/下一周
【月模式中】 左右滑動可切換 上一月/下一月
安裝使用說明
npm i vue-hash-calendar
// 在入口文件中（main.js），導入組件庫
import vueHashCalendar from 'vue-hash-calendar'
// 引入組件CSS樣式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注冊組件庫
Vue.use(vueHashCalendar)
// 在VUE文件中引入組件
<vue-hash-calendar></vue-hash-calendar>
CDN 方式引入
//在 index.html 加入以下兩個 CDN 鏈接：
js CDN：https://cdn.jsdelivr.net/npm/vue-hash-calendar@1.1.17/lib/vue-hash-calendar.umd.min.js
css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@1.1.17/lib/vue-hash-calendar.css
//然后在 webpack 配置中，加入以下配置。
externals: {
'vue-hash-calendar': 'VueHashCalendar'
},
Demo
或者請用瀏覽器的手機模式查看：https://www.hxkj.vip/demo/calendar/
- 🎉 覺得好用可以給一個 star 哦~~ 🎉
github地址：https://github.com/TangSY/vue-hash-calendar
API
| 屬性 | 說明 | 類型 | 默認 | 是否必傳 |
|---|---|---|---|---|
| visible | 控制日歷組件的顯示或隱藏,需使用 .sync 修飾符 |
Boolean | false | 否 |
| scrollChangeDate | 控制滑動的時候是否修改選中的日期 | Boolean | true | 否 |
| model | 日歷組件以哪種形式展示。inline：內聯的方式。dialog：彈窗的方式 | String | inline | 否 |
| defaultDatetime | 指定默認時間。 | Date | 當前時間 | 否 |
| format | 確認日期時，回調事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，當前時間 hh 時 mm 分”、“MM DD,YY at hh:mm F” | String | YY/MM/DD hh:mm | 否 |
| weekStart | 以星期幾作為日歷每一周的起始星期。可選['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] | String | sunday | 否 |
| pickerType | 選擇器類型 datetime：日期+時間 date：日期 time：時間 | String | datetime | 否 |
| showTodayButton | 是否顯示返回今日按鈕 | Boolean | true | 否 |
| isShowWeekView | 是否以周視圖展示組件 | Boolean | false | 否 |
| disabledWeekView | 禁用周視圖（設置為 true 后，無法上下滑動進行周/月切換） | Boolean | false | 否 |
| disabledDate | 設置日期的禁用狀態，參數為當前日期，要求返回 Boolean （禁用該日期需返回 true） | Function | --- | 否 |
| markDate | 需要被標記的日期，可按不同顏色分組標記（不分組默認藍色）。如：[{color: 'red',date: ['2019/02/25']},{color: 'blue',date: ['2019/01/20']},'2019/03/20'] | Array | [] | 否 |
| markType | 標記圖案類型 dot：小圓點（日期下方小圓點標記） circle：小圓圈（日期被小圓圈包圍） dot+circle：同時使用小圓點與圓圈標記 | String | dot | 否 |
| minuteStep | 間隔時間。（分鍾的步長） | Number | 1 | 否 |
| lang | 選擇的語言版本。可選值:['CN', 'EN'] | String | CN | 否 |
| disabledClassName | 日期被禁用時的 className。用於修改日期被禁用時的默認樣式 | String | --- | 否 |
| notCurrentMonthDayClassName | 非當前展示月份日期的 className(例如日歷前面幾天與后面幾天灰色部分)。用於修改非當前展示月份日期的默認樣式 | String | --- | 否 |
| checkedDayClassName | 日期被選中時的 className。用於修改日期被選中時的默認樣式 | String | --- | 否 |
| todayClassName | 當天日期的 className。用於修改當天日期的默認樣式 | String | --- | 否 |
| firstDayOfMonthClassName | 每月第一天的 className。用於修改每月第一天的默認樣式 | String | --- | 否 |
事件
| 事件名稱 | 說明 | 參數 |
|---|---|---|
| change | 日期改變時，觸發該事件。（返回的日期格式取決於 format 屬性） | (date: 日期改變時，選中的日期) |
| confirm | 點擊確認按鈕時，觸發該事件，dialog 模式中才有該按鈕。（返回的日期格式取決於 format 屬性） | (date: 點擊確認按鈕時，選中的日期) |
| click | 點擊日期時，觸發該事件。（返回的日期格式取決於 format 屬性） | (date: 當前點擊的日期) |
| touchstart | 日歷滑動 start 事件，同於原生該事件。 | （event: touch 事件） |
| touchmove | 日歷滑動 move 事件，同於原生該事件。 | （event: touch 事件） |
| touchend | 日歷滑動 end 事件，同於原生該事件。 | （event: touch 事件） |
| slidechange | 日歷滑動的方向。返回值：right、left、up、down 。 | （direction: 滑動的方向） |
插槽 Slot
| name | 說明 |
|---|---|
| day | 自定義日期內容。例如可用於添加農歷之類的。配合自定義 className 使用，效果更佳！參數為 { date, extendAttr }，其中 extendAttr 參數包含 isMarked（該日期是否被標記）、isDisabledDate（該日期是否被禁用）、isToday（該日期是否為今天）、isChecked（該日期是否被選中）、isCurrentMonthDay（該日期是否為本月日期）、isFirstDayOfMonth（該日期是否為當月第一天），可用於一些特殊需求 |
| week | 自定義星期內容。例如可用於自定義星期樣式等等。參數為 { week } |
版本記錄
Other
- 在 dialog 模式中，如何顯示日歷組件？注意使用
.sync修飾符
<vue-hash-calendar :visible.sync="isShowCalendar"></vue-hash-calendar>
//設置為true
this.isShowCalendar = true;
- 如何設置禁用日期？ 可參考源碼中
App.vue文件
// 例如禁用今日之后的所有日期
/** vue模板文件 **/
<vue-hash-calendar :disabled-date="disabledDate"></vue-hash-calendar>
/** vue methods 中的方法 **/
disabledDate(date) {
let timestamp = date.getTime();
if (timestamp > new Date().getTime()) {
return true
}
return false
}
- 如果有其他問題， 或者功能上不兼容的。可以郵件溝通 t@tsy6.com，或者 github 提交 issue。
贊助
轉載請注明出處
作者：HashTang
個人空間：https://hxkj.vip