vue.js城市选择框组件

Vue-flatPickr (Vue-flatPickr)

Vue.js v2.x component for Flatpickr date-time picker

Flatpickr日期时间选择器的Vue.js v2.x组件

If you are looking for the documentation of older version then switch to respective version branch.

如果要查找旧版本的文档，请切换到相应的版本分支。

特征 (Features)

• Reactive v-model value

  React性v-model值

  • You can change flatpickr value programmatically
    您可以通过编程方式更改Flatpickr值

• Reactive config options

  React性配置选项

  • You can change config options dynamically
    您可以动态更改配置选项
  • Component will watch for any changes and redraw itself
    组件将监视任何更改并重新绘制自身
  • Vue.setVue.set修改配置

• Emits all possible events

  发出所有可能的事件

• Compatible with Bootstrap, Bulma or any other CSS framework

  与Bootstrap ， Bulma或任何其他CSS框架兼容

• Supports wrapped mode

  支持包装模式

  • wrap:true in config and component will take care of allwrap:true ，组件将负责所有操作

• Play nice with vee-validate validation library

  使用vee-validate验证库玩得很好

安装 (Installation)

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

# Yarn
yarn add vue-flatpickr-component

用法 (Usage)

最小的例子 (Minimal example)

<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>

详细的例子 (Detailed example)

This example is based on Bootstrap 4 input group

本示例基于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 is just for this example
  import 'bootstrap/dist/css/bootstrap.css';
  // import this component
  import flatPickr from 'vue-flatpickr-component';  
  import 'flatpickr/dist/flatpickr.css';
  // theme is optional
  // try more themes at - https://chmln.github.io/flatpickr/themes/
  import 'flatpickr/dist/themes/material_blue.css';
  // l10n is optional
  import {Hindi} from 'flatpickr/dist/l10n/hi';
  
  export default {
    name: 'yourComponent',
    data () {
      return {
        // Initial value
        date: new Date(),
        // Get more form https://chmln.github.io/flatpickr/options/
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'M	j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // locale for this instance only          
        },                
      }
    },
    components: {
      flatPickr
    },    
  }
</script>

作为插件 (As plugin)

import Vue from 'vue';
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';
  Vue.use(flatPickr);

This will register a global component <flat-pickr>

这将注册一个全局组件<flat-pickr>

大事记 (Events)

• The components emits all possible events, you can listen to them in your component

  组件会发出所有可能的事件，您可以在组件中收听它们

<flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>

• Events names has been converted to kebab-case.

  事件名称已转换为kebab-case。

• You can still pass your methods in config like original flatpickr do.

  您仍然可以像原始flatpickr一样在配置中传递方法。

可用道具 (Available props)

The component accepts these props:

该组件接受以下道具：

Attribute	Type	Default	Description
v-model / value	String / Date Object / Array / Timestamp / null	null	Set or Get date-picker value (required)
config	Object	{wrap:false}	Flatpickr configuration options
events	Array	Array of all events	Customise the events to be emitted

属性	类型	默认	描述
v模型/值	字符串/日期对象/数组/时间戳/空	null	设置或获取日期选择器值(必填)
配置	目的	{wrap:false}	Flatpickr配置选项
大事记	数组	所有事件的数组	自定义要发出的事件

在非模块环境中安装(没有webpack) (Install in non-module environments (without webpack))

• Include required files

  包括所需文件

<!-- Flatpickr related files -->
<link href="https://unpkg.com/[email protected]/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/flatpickr.min.js"></script>
<!-- Vue js -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/[email protected]"></script>

• Use the component anywhere in your app like this

  像这样在应用程序中的任何地方使用组件

<main id="app">  
    <flat-pickr v-model="date" class="input"></flat-pickr> 
</main>
<script>
  // Initialize as global component
  Vue.component('flat-pickr', VueFlatpickr);
  
  new Vue({
    el: '#app',
    data: {
      date: null
    },    
  });
</script>

在本地主机上运行示例 (Run examples on your localhost)

• Clone this repo

  克隆此仓库

• You should have node-js >=6.10 <7.0.0 || >=9.x and yarn >=1.x pre-installed

  您应该让node-js> = 6.10 <7.0.0 || 预装> = 9.x和纱线> = 1.x

• Install dependencies yarn install

  安装依赖项yarn install

• Run webpack dev server yarn start

  运行webpack dev服务器yarn start

• This should open the demo page at http://localhost:8000 in your default web browser

  这应该在默认的Web浏览器中打开位于http://localhost:8000的演示页面。

翻译自: https://vuejsexamples.com/vue-js-component-for-flatpickr-datetime-picker/

vue.js城市选择框组件