ms-vue-calendar v0.1.1

ms-vue-calendar

A Vue.js project

news

• 最新稳定版 0.99（支持 mongolian/tibetan/english/uighur）
• 按日选择为第一选择
• 增加yyyy/mm/dd

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

Installation

npm install ms-vue-calendar

Use

<template>
    <div id="app">
        <div class="example">
            <button @click="showPicker=true">点击弹出</button>
        </div>
        <!-- 通话详单样式支持按月、按日范围选择（需选择两次） -->
        <ms-vue-calendar
            ref="mscalendar"
            :show-picker="showPicker"
            :show-confirm="true"
            date-type="range"
            :lang="langString"
            :server-date="serverDate"
            date-format="/"
            :show-month-tab="true"
            :month-range="6"
            :active="0"
            :within-month="true"
            theme-color="#E60027"
            @confirm="confirm"
            @close="showPicker = false"
        ></ms-vue-calendar>

        <!-- 上网记录 -->
        <!-- <ms-vue-calendar
            ref="mscalendar"
            :show-picker="showPicker"
            :show-confirm="true"
            date-type="range"
            :lang="langString"
            :server-date="serverDate"
            date-format="/"
            :show-month-tab="true"
            :start-date="'2021/03/02'"
            :active="0"
            :within-month="true"
            theme-color="#E60027"
            @confirm="confirm"
            @close="showPicker = false"
        ></ms-vue-calendar> -->

        <!-- 单日立即选择 -->
        <!-- <ms-vue-calendar
            ref="mscalendar"
            :show-picker="showPicker"
            :show-confirm="false"
            date-type="single"
            :lang="langString"
            :server-date="serverDate"
            date-format="/"
            :show-month-tab="false"
            :months-range="6"
            :within-month="false"
            theme-color="#E60027"
            @confirm="confirm"
            @close="showPicker = false"
        ></ms-vue-calendar> -->

        <!-- 最多七天无标题tab -->
        <!-- <ms-vue-calendar
            ref="mscalendar"
            :show-picker="showPicker"
            :show-confirm="false"
            date-type="range"
            :show-tab="false"
            :lang="langString"
            :server-date="serverDate"
            date-format="/"
            :show-month-tab="false"
            :months-range="6"
            :max-range="7"
            range-prompt-text="最多查询7天且不能跨月选择"
            :selected-date="selectedDate"
            :within-month="true"
            theme-color="#E60027"
            @confirm="confirm"
            @close="showPicker = false"
        ></ms-vue-calendar> -->
    </div>
</template>

import msVueCalendar from 'ms-vue-calendar';
Vue.use(msVueCalendar);

components: {
    msVueCalendar
}

data () {
  return {
        showPicker: false,
        serverDate: "",
        langString: "",
        selectedDate: [new Date('2022/3/24'),new Date('2022/3/30')]
  }
},
created() {
    this.serverDate = new Date().toLocaleDateString(); //'2021/2/8'
    this.langString = ""; //"english"; //"uighur"; //"mongolian"; //
},
methods: {
    confirm(dates) {
        console.log("selected", dates);
    },
},

Result Example

• month: 按月选择

  {
      dd: "01"
      formattedMonth: "2022/02"
      mm: "02"
      month: Tue Feb 01 2022 00:00:00 GMT+0800 (中国标准时间)
      monthymd: "202202"
      type: "month"
      yyyy: "2022"
  }

• range:按日期范围选择(同一天时yyyy/mm/dd取的是startDay)

  {
      dd: "31"
      endDay: Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)
      endDayymd: "20220401"
      formattedEndDay: "2022/04/01"
      formattedStartDay: "2022/03/31"
      mm: "03"
      startDay: Thu Mar 31 2022 00:00:00 GMT+0800 (中国标准时间)
      startDayymd: "20220331"
      type: "range"
      yyyy: "2022"
  }

• single:单日立即选择

  {
      day: Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)
      dayymd: "20220401"
      dd: "01"
      formattedDay: "2022/04/01"
      mm: "04"
      type: "single"
      yyyy: "2022"
  }

Props

Events