vue3-hash-calendar，一款基於vue3.x開發的移動端日期時間選擇組件

• 2022 年 2 月 28 日
• 筆記

在大家的催更下，鴿了一天又一天，vue3-hash-calendar 終於在今天誕生了。

按照慣例，先上效果圖

Demo

掃描上方二維碼或者請用瀏覽器的手機模式查看：//www.hxkj.vip/demo/calendar/

• 🎉 覺得好用可以給一個 star 哦~~ 🎉

倉庫地址

• github：//github.com/TangSY/vue3-hash-calendar
• 碼雲 gitee：//gitee.com/HashTang/vue3-hash-calendar

其他版本

• vue 2.x 版本：//github.com/TangSY/vue-hash-calendar
• react 版本：//github.com/TangSY/react-hash-calendar

vue3-hash-calendar

• 基於 vue 3.X 開發的日曆組件
• 支援手勢滑動操作
• 原生 js 開發，沒引入第三方庫
• 支援快速切換年份和月份
• 上下滑動 切換 周/月 模式
  

  【周模式中】 左右滑動可切換 上一周/下一周
  【月模式中】 左右滑動可切換 上一月/下一月

安裝使用說明

npm i -S vue3-hash-calendar

// 在入口文件中（main.js），導入組件庫
import vueHashCalendar from 'vue3-hash-calendar'
// 引入組件CSS樣式
import 'vue3-hash-calendar/lib/style.css'
const app = createApp(App);
// 註冊組件庫
app.use(vueHashCalendar);

// 在VUE文件中引入組件
<vue-hash-calendar />

CDN 方式引入

//在 index.html 加入以下兩個 CDN 鏈接：
js CDN：//cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/vue-hash-calendar.umd.js
css CDN: //cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/style.css

//然後在 webpack 配置中，加入以下配置。
externals: {
'vue-hash-calendar': 'VueHashCalendar'
},

API

事件

插槽 Slot

方法 Method

Other

• 在 dialog 模式中，如何顯示日曆組件？注意使用 v-model:visible

<vue-hash-calendar v-model:visible="isShowCalendar"></vue-hash-calendar>

//設置為true
this.isShowCalendar = true;

• cdn 方式引入的組件，為什麼有些屬性不起作用？

在非 webpack 開發模式下，屬性名稱不能使用駝峰命名。例如：isShowAction 需要寫成 is-show-action.

• 想要返回標準的英文格式日期，format 屬性應該怎樣寫？ MM DD,YY at hh:mm F

<vue3-hash-calendar format="MM DD,YY at hh:mm F" />

• 想要返回 12 小時制的日期，format 屬性應該怎樣寫？ 在格式化字元串後面加上大寫 F

<vue3-hash-calendar format="YY/MM/DD hh:mm F" />

• day slot 的基本用法

//github.com/TangSY/vue3-hash-calendar/blob/dev/examples/FirstDayDemo.vue

• 能否通過外部的某個按鈕來觸發日曆的展開和收起

可以在外部通過修改 isShowWeekView 的值來控制日曆的收起與展開

• 如何設置禁用日期？ 可參考源碼中 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
}

• 如何設置禁用日期？ 可參考源碼中 App.vue 文件

// 例如禁用現在之前的時間

/** vue模板文件 **/
<vue-hash-calendar :disabled-time="disabledTime"></vue-hash-calendar>

/** vue methods 中的方法 **/
disabledTime(date) { // 禁用的時間
  let hours = date.getHours()
  let minute = date.getMinutes()
  let hoursNow = new Date().getHours()
  let minuteNow = new Date().getMinutes()

  if (hours < hoursNow || (hours === hoursNow && minute < minuteNow)) {
    return true
  }
  return false
}

結語

作者：HashTang

個人空間：hxkj.vip

轉載請註明出處：//juejin.cn/post/7069756348971352078

別忘了點贊、關注、評論，支援一下哦~

如果有其他問題， 或者功能上不兼容的。可以郵件溝通 [email protected]，或者 github 提交 issue。