vue-bootstrap-datetimepicker

2018-08-20 admin

vue-bootstrap-datetimepicker是什么

什么是vue-bootstrap-datetimepicker,Vue.js component for bootstrap-datetimepicker

vue-bootstrap-datetimepicker介绍、vue-bootstrap-datetimepicker使用

=1.8.3 || ^3.2.1

Installation

# npm
npm install vue-bootstrap-datetimepicker --save

# Yarn
yarn add vue-bootstrap-datetimepicker

Using Webpack?

// webpack.config.js
plugins: [
    new webpack.ProvidePlugin({
      Vue: ['vue/dist/vue.esm.js', 'default'],
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      $: 'jquery',
      moment: 'moment',
    }),
  ]  

Using Laravel Mix ?

  • Update your webpack.mix.js file, ref
// webpack.mix.js
mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],   
    'moment': ['moment','window.moment'],   
  })

Usage Example

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <date-picker v-model="date" :config="config"></date-picker>
      </div>
    </div>
  </div>
</template>

<script>
  // Import required dependencies 
  import 'bootstrap/dist/css/bootstrap.css';

  // Import this component
  import datePicker from 'vue-bootstrap-datetimepicker';

  // Import date picker css
  import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

  export default {    
    data () {
      return {
        date: new Date(),
        config: {
          format: 'DD/MM/YYYY',
          useCurrent: false,
        }       
      }
    },
    components: {
      datePicker
    }
  }
</script>

As plugin

  import Vue from 'vue';
  import datePicker from 'vue-bootstrap-datetimepicker';
  import 'bootstrap/dist/css/bootstrap.css';
  import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
  Vue.use(datePicker);

This will register a global component <date-picker>

Events

  • The component emits all available events
  • You can listen to them in your component like -
<date-picker v-model="date" @dp-hide="doSomethingOnHide" @dp-change="doSomethingOnChange"></date-picker>

Available props

The component accepts these props:

Attribute Type Default Description
v-model / value String / Date Object / moment / null null Set or Get date-picker value
config Object {} Datetime picker configuration options
wrap Boolean false Set this to true when wrapped in ‘input-group’

Install in non-module environments (without webpack)

<!-- Date-picker dependencies -->
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/moment@2.18.1/min/moment.min.js"></script>
<link href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Date-picker itself -->
<script src="https://unpkg.com/eonasdan-bootstrap-datetimepicker@4.17.47/build/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://unpkg.com/eonasdan-bootstrap-datetimepicker@4.17.47/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<!-- Vue js -->
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script>
<script>
  // Initialize as global component
  Vue.component('date-picker', VueBootstrapDatetimePicker.default);

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-38469.html

文章标题:vue-bootstrap-datetimepicker

回到顶部