roche-vue2-datepicker

A Datepicker Component For Vue2

Install

1$ npm install roche-vue2-datepicker --save

组件使用文档

属性

name	type	默认值	可选值	说明
v-model/value	String/Array/Date	-	-	选中值
width	String/Number	350	-	日期选择面板大小
placement	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom	出现位置
disabled	boolean	false	true/false	是否禁用
placeholder	string	请选择		输入框说明
inputType	string	default	default/simple/input	input框类型
inputClass	string	--	--	input框class
modules	array	['preset','date','week','month','range']	--	选择要使用的模块
format	string	MM月DD日	--	展示的日期格式
yearFormat	string	YYYY年MM月DD日	--	展示的日期格式（包括年）
valueFormat	string		--	日期值格式
disabledDate	function	--	--	禁用日期
presetList	array	--	--	预设列表
theme	string	default	default/dark	主题

事件

name	说明	回调参数
change	选中值发生变化的回调	value

插槽

name	说明

方法

name	说明	回调参数

使用

<template>
    <r-date-picker v-model="now" @change='onChange'></r-date-picker>
<template>

<script>
    import { RDatePicker } from "roche-vue2-datepicker";
    // 汉化
    import "roche-vue2-datepicker/dist/locale/zh-cn";
    import "roche-vue2-datepicker/dist/index.css";
    export default {
        data(){
            return {
                now:''
            }
        },
        components:{
            RDatePicker
        },
        methods:{
            onChange(val){
                console.log('日期发生变化:',val)
            }
        }
    }
</script>