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

实际效果图如下:

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
Y4个数字代表的年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

给TA打赏
共{{data.count}}人
人已打赏
Go技术技巧

Golang正则表达式语法用法

2022-4-25 15:51:49

Linux技术技巧

关于Unraid中Docker抢占MAC地址导致爱快识别错误的一件事

2023-2-3 16:59:04

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

Warning: error_log(/www/wwwroot/blog.52nyg.com/wp-content/plugins/spider-analyser/#log/log-0315.txt): failed to open stream: No such file or directory in /www/wwwroot/blog.52nyg.com/wp-content/plugins/spider-analyser/spider.class.php on line 2900