Vue Bootstrap 4 DatetimePicker


Vue.js component for eonasdan-bootstrap-datetimepicker

Demo on JSFiddle

Versions

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

| 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-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
* Works with vee-validate and other validation library

Requirements

* Bootstrap ^4 (only css)
* jQuery >=1.8.3
* Moment.js ^2.22

Installation

``bash

npm

npm install vue-bootstrap-datetimepicker --save

Yarn

yarn add vue-bootstrap-datetimepicker
`

#### Using Webpack?
* Webpack users need to configure ProvidePlugin
`js
// 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
`js
// 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.
`js
// 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


`html


`

#### As plugin
`js
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

Events


* The component emits all available events
* You can listen to them in your component like -
`html

`

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

$3


`html






`

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:9000 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.

Caveats

* :warning: Don't pass config option as inline literal object to :config prop.
`html


``
* Vue.js can not detect changes when literal object/arrays passed within template, see

License

MIT License