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>

配置项：

日期格式字符: