Vue-Bootstrap-4-DatetimePicker
Vue.js v2.x component for eonasdan-bootstrap-datetimepicker
Features
- Reactive
v-model
value
- You can change datepicker value programmatically
- Reactive config options
- You can change config options dynamically
- Component will watch for changes and apply them
- You are suggested to modify config via Vue.set
- Emits all possible events
- Play nice with vee-validate validation library
Requirements
- Bootstrap ^4 (only css)
- jQuery >=1.8.3
- Moment.js ^2.18
Installation
npm install vue-bootstrap-datetimepicker --save
yarn add vue-bootstrap-datetimepicker
Using Webpack?
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
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 'bootstrap/dist/css/bootstrap.css';
import datePicker from 'vue-bootstrap-datetimepicker';
import 'pc-bootstrap4-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)
<script src="https://unpkg.com/jquery@3.3/dist/jquery.min.js"></script>
<script src="https://unpkg.com/moment@2.18/min/moment.min.js"></script>
<link href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17/build/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script>
<script>
Vue.component('date-picker', VueBootstrapDatetimePicker.default);
</script>
Run examples on your localhost
- Clone this repo
- You should have node-js >=6.10 and yarn >=1.x pre-installed
- Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:8000
in your default web browser
Testing
- This package is using Jest and vue-test-utils for testing.
- Tests can be found in
__test__
folder. - Execute tests with this command -
yarn test
Changelog
Please see CHANGELOG for more information what has changed recently.
License
MIT License