Vue.js的Flatpickr日期时间选择器组件 - vue-flatpickr-component

Vue.js的Flatpickr日期时间选择器组件 - vue-flatpickr-component
插件名称 vue-flatpickr-component
版本号 v9.0.4
发布时间 2020年10月11日
插件作者 ankurk91

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

安装和下载:

# Yarn
$ yarn add vue-flatpickr-component

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

特征

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

变更日志:

v9.0.4 (07/05/2020)

  • 错误修正

v9.0.3(2020年12月29日)

  • 错误修正

v9.0.0(10/09/2020)

  • 删除对Vue v2.x的支持,并添加对Vue v3.x的支持
  • 放弃IE 11支持

v8.1.6(2020年8月30日)

  • 错误修正

v8.1.5(11/04/2019)

  • 错误修正

用法

最小的例子

<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">Toggle</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">Clear</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://www.flatpickr.cn/themes.html
  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://www.flatpickr.cn/options.html
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'M j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // 仅用于此实例的区域设置          
        },                
      }
    },
    components: {
      flatPickr
    },    
  }
</script>