vue日期选择组件_Vue 2日历日期选择器组件，支持农历或日期事件

vue日期选择组件

vue2日历 (vue2-calendar)

vue 2 calendar, datepicker component which supported lunar or date event.

vue 2日历，支持月球或日期事件的日期选择器组件。

View demo 查看演示 Download Source 下载源

• This project is not only a vue component, but also a webpack multi-page project in action.

  该项目不仅是vue组件，而且还在运行中的webpack 多页项目。

• Support Boostrap 4

  支持Boostrap 4

安装 (Install)

$ npm install vue2-slot-calendar

使用模块导入 (Import using module)

import 'bootstrap-sass' // alias css

// js file
import 'vue2-slot-calendar/lib/calendar.min.css';
import calendar from 'vue2-slot-calendar/lib/calendar';

// vue file
// in ES6 modules
import Calendar from 'vue2-slot-calendar';

// in CommonJS
const Calendar = require('vue2-slot-calendar');

// in Global variable
const VueCalendar = Calendar;

使用脚本标签导入 (Import using script tag)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/vue2-slot-calendar/lib/calendar.min.css" >
<script src="../node_modules/vue2-slot-calendar/lib/calendar.min.js"></script>

Also see the demo file, example/demo.html

另请参阅演示文件example/demo.html

构建设置 (Build Setup)

# install dependencies
npm install

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

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test

Chinese user:

中国用户：

屏幕截图 (Screenshot)

用法 (Usage)

<calendar
    :value="value"
    :disabled-days-of-week="disabled"
    :format="format"
    :clear-button="clear"
    :placeholder="placeholder"
    :pane="2"
    :has-input="false"
    :on-day-click="onDayClick2"
    :special-days="_dateMap"
  ></calendar>

使用广告位呈现异步数据 (Use slot to render async data)

<calendar class="event-calendar" :value="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" :pane="2" :has-input="false" :on-day-click="onDayClick3" :change-pane="changePane">
    <div v-for="evt in events" :slot="evt.date">
        ${{evt.content}} <i :class="{low : evt.low}" v-if="evt.low">↓</i>
    </div>
  </calendar>

范围悬停状态 (Range Hover Status)

<calendar :value="value" :disabled-days-of-week="disabled" :format="format"
   :clear-button="clear" :placeholder="placeholder" :pane="2"
   :range-bus="getBus" :range-status="1"></calendar>

  <calendar :value="value" :disabled-days-of-week="disabled" :format="format"
   :clear-button="clear" :placeholder="placeholder" :pane="2"
   :range-bus="getBus" :range-status="2"></calendar>

道具 (Props)

Options/Props

选项/道具

Name	Type	Default	Description
value	String	''	Value of the input DOM
width	String	'200px'	Width of the input DOM
format	String	MMMM/dd/yyyy	The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-week	Array		Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
clear-button	Bollean	false	If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.
placeholder	String		Placeholder to put on the input field when no date (null or empty) is set
hasInput	Boolean	true	Default is has-input style, if don't have input will show pane directly
pane	Number	1	pane count
borderWidth	Number	2	This value is for calculating the pane width
onDayClick	Function		Only for hasInput set false
specialDays	Object		To repalce the day text
changePane	Function		For pane change parameter (year, month, pane) month[0,11], demo /src/modules/Docs.vue
rangeBus	Function		should return new Vue() as sibling component communication events bus
rangeStatus	Number	0	Default is disabled range hover effect, currently only support [0,1,2] 1 will communicate with 2
onDrawDate	Function		DrawDate Function allowSelect to update date cell style
showDateOnly	Boolean	false	show date pane only
transfer	Boolean	false	transfer popup to document.body
elementId	String		elementId for label tag for attribute

名称	类型	默认	描述
值	String	''	输入DOM的值
宽度	String	'200px'	输入DOM的宽度
格式	String	MMMM/dd/yyyy	日期格式，d，dd，M，MM，MMM，MMMM，yyyy的组合。
一周中禁用的天数	Array		应该在星期几禁用。 值是0(星期日)到6(星期六)。 多个值应以逗号分隔。
清除按钮	Bollean	假	如果为true，则显示一个×形的按钮以清除所选日期。 在可选的日期输入形式中有用。
占位符	String		没有设置日期(空或空)时放置在输入字段上的占位符
hasInput	Boolean	真正	默认为具有输入样式，如果没有输入将直接显示窗格
窗格	Number	1个	窗格数
borderWidth	Number	2	此值用于计算窗格宽度
onDayClick	Function		仅对于hasInput设置为false
特别的日子	Object		替换当天的文字
changePane	Function		对于窗格更改参数(年，月，窗格)month [ /src/modules/Docs.vue ]，演示/src/modules/Docs.vue
rangeBus	Function		应该返回new Vue()作为同级组件通信事件总线
rangeStatus	Number	0	默认为disabled范围悬停效果，当前仅支持[0,1,2] 1将与2通信
onDrawDate	Function		DrawDate函数allowSelect更新日期单元格样式
showDateOnly	Boolean	假	仅显示日期窗格
转让	Boolean	假	将弹出窗口转移到document.body
elementId	String		for属性标签标签的elementId

大事记 (Events)

Name	Description
drawdate	drawdate Event like onDrawDate

名称	描述
提款日期	drawdate事件，例如onDrawDate

props: {
    value: {
      type: String
    },
    format: {
      default: 'MM/dd/yyyy'
    },
    disabledDaysOfWeek: {
      type: Array,
      default () {
        return []
      }
    },
    width: {
      type: String,
      default: '200px'
    },
    clearButton: {
      type: Boolean,
      default: false
    },
    lang: {
      type: String,
      default: navigator.language
    },
    placeholder: {
      type: String
    },
    hasInput: {
      type: Boolean,
      default: true
    },
    pane: {
      type: Number,
      default: 1
    },
    borderWidth: {
      type: Number,
      default: 2
    },
    onDayClick: {
      type: Function,
      default () {}
    },
    changePane: {
      type: Function,
      default () {}
    },
    specialDays: {
      type: Object,
      default () {
        return {}
      }
    },
    rangeBus: {
      type: Function,
      default () {
        // return new Vue()
      }
    },
    rangeStatus: {
      type: Number,
      default: 0
    },
    onDrawDate: {
      type: Function,
      default () {}
    },
    showDateOnly: {
      type: Boolean,
      default: false
    },
    transfer: {
      type: Boolean,
      default: false
    },
    elementId: [String]

  }

翻译自: https://vuejsexamples.com/vue-2-calendar-datepicker-component-which-supported-lunar-or-date-event-2/

vue日期选择组件