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>

配置项：

日期格式字符: