VUE3 中使用FlatPickr时间选择器组件

浏览:1157次阅读
没有评论

实际效果图如下:

VUE3 中使用 FlatPickr 时间选择器组件

首先安装:vue-flatpickr-component 时间选择器库

npm 安装:

npm install vue-flatpickr-component --save

Yarn 安装:

yarn add vue-flatpickr-component

<template>

              <div class="col-md-6">
                <label for="validationDefault02" class="form-label">Vip 过期时间 </label>
                <flat-pickr
                      v-model="info.expire_time"
                      :config="dateTimeConfig"
                      class="form-control"
                    ></flat-pickr>

              </div>
<template>

<script>
import flatPickr from 'vue-flatpickr-component';  // 引入 flatpickr 组件
import 'flatpickr/dist/flatpickr.css';                // 引入他的 css 样式
import {Mandarin} from 'flatpickr/dist/l10n/zh.js';   // 引入普通话语言包

export default {
  components: {flatPickr},
  data() {
   return {
    data: null,
    dateTimeConfig: {
        wrap: true,
        altInput: true, // 用户可输入
        dateFormat: "U", //data 变成时间戳
        altFormat: "Y-m-d H:i:s", // 选择时显示的时间
        enableTime: true, // 选择小时分种
        enableSeconds: true, // 开启选择秒
        defaultHour: 8, // 默认 8 点
        time_24hr: true, // 时间 24 小时制
        locale: Mandarin, // 中文
      },
   }
  }
}
</script>

配置项:

参数 类型 默认值 描述
altFormatstring“F j, Y”altInput 的日期格式
altInputBooleanfalse 是否使用某种用户友好的方式来显示日期时间。
altInputClassString“” 添加到 input 上的自定义 class 类。例如 bootstrap 用户可能需要添加一个 form-control class。
allowInputbooleanfalse 是否允许用户直接在输入框中输入日期。
clickOpensbooleantrue 是否在点击输入框时打开日期时间选择界面。如果你想通过手动.open() 方法来打开,该选项设置为 false。
dateFormatstring“Y-m-d” 设置日期显示格式。
defaultDateString/Date Objectnull 设置一个初始的日期。
disablearray[] 被禁用的日期。
enableTimebooleanfalse 是否启用时间选择。
enableSecondsbooleanfalse 在时间选择器中是否可以选择秒。
noCalendarbooleanfalse 是否隐藏日历。
hourIncrementinteger1 小时输入框的步长。
minuteIncrementinteger5 分钟输入框的步长。
inlinebooleanfalse 是否以内联的方式显示日历。
staticbooleanfalse 日期选择器位于包裹容器的位置。
wrapbooleanfalse 包裹元素。
maxDateStringnull 用户可以选择的最大日期。
minDateStringnull 用户可以选择的最小日期。
onChangefunction(dateObject, dateString)null 每次日期被选择的时候都触发该函数。
onOpenfunction(dateObject, dateString)null 每次日历被打开时都会触发该函数。
onClosefunction(dateObject, dateString)null 每次日历被关闭时都会触发该函数。
parseDatefunctionfalse 接收一个日期字符串并返回一个日期对象。
shorthandCurrentMonthbooleanfalse 以简写方式显示月份
weekNumbersbooleanfalse 是否在日历中显示星期数。
time_24hrbooleanfalse 是否以 24 小时格式来显示时间。
utcbooleanfalse 日期将会被解析、格式化和显示为 UTC 格式。
prevArrowstring< 向前箭头图标。
nextArrowstring> 向后箭头图标。

日期格式字符:

字符 描述 示例
d 月份中的天数,如果不满 2 个数字的会前导 0。01 - 31
D 一个星期中某一天的简写文本表示 Mon - Sun
l(小写的 L) 一个星期中某一天的文本表示 Sunday - Saturday
j 不带前导 0 的月份中的天数 1 - 31
J 带序号后缀,不带前导 0 的月份中的天数 1st, 2nd, to 31st
w 使用数字来代表星期中的某一天 0 (星期天) - 6 (星期六)
F 月份的完整文本表示 January - December
m 使用数字来表示月份,前导带 0。01 - 12
n 使用数字来表示月份,前导不带 0。1 - 12
M 月份的简写文本表示 Jan - Dec
U 时间戳 1413704993
y 两个数字代表的年 99 or 03
Y 4 个数字代表的年 1999 or 2003
H24 小时制 00 to 23
h12 小时制 1 to 12
i 分钟 00 to 59
S(不满 2 位数补 0)00 to 59
s0 - 59
KAM/PMAM or PM
正文完
 0
包子
版权声明:本站原创文章,由 包子 于2022-07-05发表,共计2299字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)