带有Tailwind的日期范围选择器组件– Litepie

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）

修复在Vite上动态导入的问题

v1.0.12（03/21/2021）

解决本地化延迟加载问题。

v1.0.11（03/20/2021）

触发keyup事件时发出。

v1.0.10（03/20/2021）

start-from 如果使用本地化，则修复错误

v1.0.9（03/20/2021）

道具页脚已删除。
修复本地化
修复了单击快捷方式后自动应用错误的问题。
添加新的道具选项

v1.0.8（03/20/2021）

添加快捷方式，页脚和dayjs语言环境的本地化。
新道具i18n
将本地模型值更改为pickerValue。
修复问题从左到右的放置箭头。

v1.0.7（03/17/2021）

错误修复

v1.0.6（03/17/2021）

新道具页脚
重新设计布局，用于断点768〜1024
如果活跃月份，则隐藏“下一个/上一个”按钮

v1.0.5（03/16/2021）

添加了dayjs customParseFormat插件，以正确地从格式化道具中解析
添加了键盘事件键盘更新值

v1.0.4（03/13/2021）

修复使用自定义快捷方式时的错误

v1.0.3（03/10/2021）

固定错别字inRangeBetween

v1.0.2（03/09/2021）

露出占位符，将功能清除到插槽道具中

官网：https://litepie.com/

演示：https://www.vue365.cn/code_demo.php?id=4309

GitHub下载：https://github.com/kenhyuwa/litepie-datepicker/archive/main.zip

插件名称	litepie-datepicker
版本号	v1.0.14
发布时间	2021年3月9日
插件作者	kenhyuwa