这是Faltpickr DateTime选择器的Vue.js组件。

特征

• 无功  v-model 值
  • 您可以通过编程方式更改Flatpickr值
• 反应性配置选项
  • 您可以动态更改配置选项
  • 组件将监视任何更改并重新绘制自身
  • 建议您通过Vue.set修改配置
• 发出所有可能的事件
• 与Bootstrap，Bulma或任何其他CSS框架兼容
• 支持包装模式
  • 只需wrap:true 在config中设置  ，组件即可完成所有工作
• 使用vee-validate验证库玩得很好

变更日志：

v8.1.6（2020年8月30日）

• 错误修正

v8.1.5（11/04/2019）

• 错误修正

安装和下载：

# Yarn
$ yarn add vue-flatpickr-component

# NPM
$ npm install vue-flatpickr-component --save

用法

最小的例子

<template>
  <div>
    <flat-pickr v-model="date"></flat-pickr>
  </div>
</template>

<script>
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';
  
  export default {    
    data () {
      return {
        date: null,       
      }
    },
    components: {
      flatPickr
    }
  }
</script>

详细的例子

本示例基于Bootstrap 4 输入组

<template>
  <section>
    <div class="form-group">
      <label>Select a date</label>
      <div class="input-group">
        <flat-pickr
                v-model="date"
                :config="config"                                                          
                class="form-control" 
                placeholder="Select date"               
                name="date">
        </flat-pickr>
        <div class="input-group-btn">
          <button class="btn btn-default" type="button" title="Toggle" data-toggle>
            <i class="fa fa-calendar">
              <span aria-hidden="true" class="sr-only">切换</span>
            </i>
          </button>
          <button class="btn btn-default" type="button" title="Clear" data-clear>
            <i class="fa fa-times">
              <span aria-hidden="true" class="sr-only">清除</span>
            </i>               
          </button>
        </div>
      </div>
    </div>
    <pre>Selected date is - {{date}}</pre>
  </section>
</template>

<script>
  // bootstrap仅用于此示例
  import 'bootstrap/dist/css/bootstrap.css';
  // 导入此组件
  import flatPickr from 'vue-flatpickr-component';  
  import 'flatpickr/dist/flatpickr.css';
  // 主题是可选的
  // 尝试更多主题 - https://flatpickr.js.org/themes/
  import 'flatpickr/dist/themes/material_blue.css';
  // 本地化是可选的
  import {Hindi} from 'flatpickr/dist/l10n/hi.js';
  
  export default {
    name: 'yourComponent',
    data () {
      return {
        // 初始值
        date: new Date(),
        // 获得更多形式 https://flatpickr.js.org/options/
        config: {
          wrap: true, // 仅当使用“input group”时将wrap设置为true
          altFormat: 'M j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // 仅此实例的区域设置         
        },                
      }
    },
    components: {
      flatPickr
    },    
  }
</script>