v-md-datepicker

A vue.js material date picker.

Usage no npm install needed!

<script type="module">
  import vMdDatepicker from 'https://cdn.skypack.dev/v-md-datepicker';
</script>

README

md-datepicker

A simple datepicker component based Vue 2.x.

安装

npm:

npm i --save v-md-datepicker

or yarn

yarn add  v-md-datepicker

可选属性

v2-datepicker 组件

属性 类型 可选值 默认值 描述
value Date 可被 new Date()解析 - 默认的日期值
lang String cn(chinese)/en(english) cn 选择语言
customLocals Object - {} custom locale
format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd 返回的日期格式
placeholder String - 选择日期/Choosing date... 占位符
disabled Boolean - false 是否禁用选择器
picker-options Object - {} 当前时间日期选择器特有的选项参考下表
render-row Number 6/7 7 渲染的行数
default-value Date 可被 new Date()解析 - 选择器打开时默认显示的时间
clearable Boolean false 是否可清空

v2-daterange-picker 组件

属性 类型 可选值 默认值 描述
value Array 可被 new Date()解析 - 默认的日期范围值
lang String cn(chinese)/en(english) cn 选择语言
customLocals Object - {} custom locale
format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd 返回的日期格式
placeholder String - 开始时间-结束时间/Choosing date range... 占位符
disabled Boolean - false 是否禁用选择器
range-separator String - '-' 选择范围时的分隔符
unlink-panels Boolean - false 在范围选择器里取消两个日期面板之间的联动
picker-options Object - {} 当前时间日期选择器特有的选项参考下表
default-value Date 可被 new Date()解析 - 选择器打开时默认显示的时间
clearable Boolean false 是否可清空

Picker Options

属性 类型 可选值 默认值 描述
shortcuts Object[] - - 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表
disabledDate Function - - 设置禁用状态，参数为当前日期，要求返回 Boolean

shortcuts

属性 类型 可选值 默认值 描述
text String - - 标题文本
onClick Function - - 选中后的回调函数

Event

事件名 描述 参数
change 选择值发生改变时触发 组件绑定的值