Vue日期选择组件vue-flatpickr-component 踩坑

Vue日期选择组件。您可以动态更改配置选项,组件将监听任何更改并重新绘制,可通过Vue.set修改配置。与Bootstrap,Bulma或任何其他框架的CSS兼容,可以动态更改配置选项。还可以与vee-validate等其他验证库一起使用。
vue-flatpickr-component.png

安装

npm

npm install vue-flatpickr-component --save

Yarn

yarn add vue-flatpickr-component

使用

引入组件

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
const zh = require("flatpickr/dist/l10n/zh.js").default.zh;

很多人中文化失败,就是引入上面语言包的时候引入错误。

在模板中加入该组件:

<template>
  <div>
     <flat-pickr placeholder="点我选择开始时间" class="mr-5" :config="configdateTimePicker" v-model="startTime" />
  </div>
</template>

js代码

<script>
export default {
    data() {
        return {
           startTime: new Date(),
           configdateTimePicker: {
                enableTime: true,
                dateFormat: 'Y-m-d h:i:S',
                time_24hr: true,
                locale: zh,
            }
        }
    },
    components: {
      flatPickr
    },    
  }
</script> 

完整示例

<template>
  <div>
     <flat-pickr placeholder="点我选择开始时间" class="mr-5" :config="configdateTimePicker" v-model="startTime" />
  </div>
</template>

<script>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
const zh = require("flatpickr/dist/l10n/zh.js").default.zh;

export default {
    data() {
        return {
           startTime: new Date(),
           configdateTimePicker: {
                enableTime: true,
                dateFormat: 'Y-m-d h:i:S',
                time_24hr: true,
                locale: zh,
            }
        }
    },
    components: {
      flatPickr
    },    
  }
</script>

事件

@on-change="doSomethingOnChange"
@on-close="doSomethingOnClose"

其他参数见项目文档

https://github.com/ankurk91/vue-flatpickr-component

# Html   Vue   flatpickr  

评论