roche-vue2-datepicker

A Datepicker Component For Vue2

Install

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