插件名称 | litepie-datepicker |
---|---|
版本号 | v1.0.14 |
发布时间 | 2021年3月9日 |
插件作者 | kenhyuwa |
Litepie是使用Tailwind CSS和day.js构建的日期和日期范围选择器Vue.js组件。
1.导入Litepie Datepicker组件。
import { ref } from 'vue';
import LitepieDatepicker from 'litepie-datepicker';
2.注册组件。
export default {
components: {
LitepieDatepicker
},
// ...
};
3.将组件添加到应用程序。
<template>
<div>
<litepie-datepicker
ref="myRef"
v-model="dateValue"
/>
</div>
</template>
export default {
components: {
LitepieDatepicker
},
setup() {
const myRef = ref(null);
const dateValue = ref([]);
return {
myRef,
dateValue
};
}
};
4.自定义日期格式。
<template>
<div>
<litepie-datepicker
ref="myRef"
:formatter="formatter"
v-model="dateValue"
/>
</div>
</template>
export default {
components: {
LitepieDatepicker
},
setup() {
const myRef = ref(null);
const dateValue = ref([]);
const formatter = ref({
date: 'DD MMM YYYY',
month: 'MMM'
});
return {
myRef,
dateValue,
formatter
};
}
};
5.可用的组件道具。
overlay: Boolean,
asSingle: Boolean,
useRange: Boolean,
placeholder: {
type: [Boolean, String],
default: false
},
i18n: {
type: String,
default: 'en'
},
disableDate: {
type: [Boolean, Array, Function],
default: false
},
disableInRange: {
type: Boolean,
default: true
},
trigger: {
type: String,
default: null
},
autoApply: {
type: Boolean,
default: true
},
shortcuts: {
type: [Boolean, Function],
default: true
},
separator: {
type: String,
default: ' ~ '
},
formatter: {
type: Object,
default: () => ({
date: 'YYYY-MM-DD HH:mm:ss',
month: 'MMM'
})
},
modelValue: {
type: [Array, Object, String],
default: []
},
startFrom: {
type: [Object, String],
default: () => new Date()
}
变更日志:
v1.0.3(03/10/2021)
固定错别字inRangeBetween
v1.0.2(03/09/2021)
露出占位符,将功能清除到插槽道具中
v1.0.14(03/31/2021)
v1.0.13(03/25/2021)
v1.0.12(03/21/2021)
v1.0.11(03/20/2021)
v1.0.10(03/20/2021)
start-from
如果使用本地化,则修复错误 v1.0.9(03/20/2021)
v1.0.8(03/20/2021)
v1.0.7(03/17/2021)
v1.0.6(03/17/2021)
v1.0.5(03/16/2021)
v1.0.4(03/13/2021)
v1.0.3(03/10/2021)
v1.0.2(03/09/2021)