vue移動端日期選擇組件

vue-mobile-calendar

a vue component of calendar for mobile

移動端日期選擇器（>=vue2.0）

點擊查看DEMO，或手機掃描下方二維碼

使用方法

npm安裝

npm install vue-mobile-calendar

import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);

外部引用方式，引入目錄文件disk/Calendar.umd.min.js

<script src='/dist/Calendar.umd.min.js'></script>

注意

本次版本升級api與2.x版本不相同，2.x版本api請點擊查看

更新日誌

• V3.0.0(2019-3-16) 增長多選、時間段選擇模式；增長日期內聯顯示方式；部分api與2.x不相同，升級請注意

Quickstart

<template>
  <div id="demo">
    <calendar @change="onChange"/>
    <inlineCalendar />
  </div>
</template>

<script>
// Vue.use(Calendar)後可直接使用`<calendar />`和`<inlineCalendar />`組件。calendar爲底部彈窗顯示，inlineCalendar爲頁面內聯顯示（可放置頁面任意地方）
export default {
  methods: {
    onChange(date) {
      console.log(date.format('YY-MM-DD'));
    },
  },
};

// 或者在.vue文件中單獨引入註冊
// import {calendar,inlineCalendar} from 'vue-mobile-calendar';
// export default {
//   components: {
//     calendar,
//   },
// };
</script>

關於日期類型

組件中日期處理依賴dayjs(api和moment相同，大小僅2kb)，如在設置defaultDate時，所支持類型以下：

當前時間

直接運行 dayjs()，獲得包含當前時間和日期的 Dayjs 對象。

dayjs()

時間字符串

能夠解析傳入的一個標準的ISO 8601時間字符串。

dayjs(String)
dayjs('1995-12-25')

Date 對象

能夠解析傳入的一個 Javascript Date 對象。

dayjs(Date)
dayjs(new Date(2018, 8, 18))

Unix 時間戳 (毫秒)

能夠解析傳入的一個 Unix 時間戳 (13 位數字)。

dayjs(Number)
dayjs(1318781876406)

Unix 時間戳 (秒)

能夠解析傳入的一個 Unix 時間戳 (10 位數字)。

dayjs.unix(Number)
dayjs.unix(1318781876)

更多api查看dayjs

屬性

名稱	類型	默認值	說明
mode	String	'single'	時間選擇模式，single:單選模式；multiple:多選模式；during:時間段選擇模式
defaultDate	[Date, Number, Array, String]	-	默認已選時間，mode爲單選模式時爲Dayjs所支持的時間類型(見上面說明)，如'1995-12-25'；mode爲多選模式爲數組形式；mode爲時間段選擇模式爲長度2的數組，如[startDate,endDate]
disabledDate	Array	[]	不可選日期，僅mode爲'single'和'multiple'下支持
enableTouch	Boolean	true	容許手勢滑動切換月份
monthNames	Array	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']	顯示的月份文本
weekNames	Array	['週一', '週二', '週三', '週四', '週五', '週六', '週日']	顯示的星期文本
closeByClickMask	Boolean	true	容許點擊遮罩層關閉（僅彈窗顯示形式的calendar生效）
dayClick	Function	-	日期點擊時的回調函數，回調參數爲當前所點擊的日期，return false將不會執行選中、取消選中的操做

事件

名稱	說明	回調
change	當前所選日期改變	回調參數爲當前所選日期（dayjs類型，如獲取時間字符串：date.format('YYYY-MM-DD')），mode爲單選模式時爲date；mode爲多選模式爲[date1,date2]；mode爲時間段選擇模式爲[startDate,endDate]，當只選了開始時間時會爲[startDate]

Reference

• framework7