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

带有Tailwind的日期范围选择器组件– Litepie
插件名称 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)

  • 修复在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)

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