JarCastingVue Bootstrap 4 DatetimePicker
Vue.js component for eonasdan-bootstrap-datetimepicker
Demo on JSFiddle
Versions
| Package Version | Bootstrap CSS version | Underlying Library | API Docs (same for both) |
|---|---|---|---|
| 4.x | 3.x | eonasdan-bootstrap-datetimepicker (Official) | Docs |
| 5.x | 4.x | pc-bootstrap4-datetimepicker (Fork) | Docs |
Features
- Reactive
v-modelvalue- 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
- Works with vee-validate and other validation library
Requirements
- Bootstrap ^4 (only css)
- jQuery >=1.8.3
- Moment.js ^2.22
Installation
# npm
npm install vue-bootstrap-datetimepicker --save
# Yarn
yarn add vue-bootstrap-datetimepicker
Using Webpack?
- Webpack users need to configure ProvidePlugin
// 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.jsfile, ref
// webpack.mix.js
mix.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery'],
'vue': ['Vue','window.Vue'],
'moment': ['moment','window.moment'],
})
Icon Fonts missing?
- Bootstrap v4 does not come with any icon fonts. You can import font-awesome v5 icons css.
// app.js
jQuery.extend(true, jQuery.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
Usage Example
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<date-picker v-model="date" :config="options"></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 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
export default {
data () {
return {
date: new Date(),
options: {
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 'pc-bootstrap4-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://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Date-picker itself -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-bootstrap-datetimepicker@5"></script>
<script>
// Initialize as global component
Vue.component('date-picker', VueBootstrapDatetimePicker);
</script>
Run examples on your localhost
- Clone this repo
- You should have node-js
>=6.10and yarn>=1.xpre-installed - Install dependencies -
yarn install - Run webpack dev server -
yarn start - This should open the demo page at
http://localhost:9000in 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.
Caveats
-
⚠️ Don't pass config option as inline literal object to:configprop.
<!-- This will cause date picker to freeze -->
<date-picker v-model="card" :config="{format: 'DD/MM/YYYY'}"></date-picker>
- Vue.js can not detect changes when literal object/arrays passed within template, see
License
MIT License