vue-hash-calendar，移動端日期時間選擇插件

按照慣例，先上效果圖

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 }

版本記錄

changelog

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