jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 >

vue日期选择组件 vue2-calendar

官方网址:http:// 下载次数:
插件描述

插件介绍

一个日期选择组件,它支持lunar和data event。

安装

通过npm安装

$ npm install vue2-slot-calendar

插件应用

<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>

通过slot渲染异步数据

<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>

渲染悬停状态

<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>

组件参数

名称类型默认值说明
valueString-dom input的值
widthString200pxdoc input的宽度
formatStringMMMM/dd/yyyy日期的格式化方式
disabled-days-of-weekArray-禁止选择的日期
clear-buttonBolleanfalse是否显示关闭按钮
placeholderString-input的placeholder内容
hasInputBooleantrue是否允许用户输入
paneNumber1窗口数量
borderWidthNumber2边框宽度
onDayClickFunction2只有在hasInput设置为false时生效
specialDaysObject-用于替代日期文字
changePaneFunction-用于窗口切换
rangeBusFunction-用于返回new Vue()来自兄弟组件的事件通信
rangeStatusNumber0默认是禁用边境悬停事件,目前支持0,1,2
onDrawDateFunction-用于更新日期框的样式
showDateOnlyBooleanfalse只显示日期窗口
transferBooleanfalse是否使用过渡动画
elementIdString-dom元素的id


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表