blueriver-vue-bootstrap-datetimepicker
v4.1.3
Published
Vue.js component for bootstrap-datetimepicker
Downloads
2
Maintainers
Readme
Lukewilson-Vue-Bootstrap-DatetimePicker
This is a very slightly modified version of Vue-Bootstrap-Datetimepicker.
Instead of using the dependency "eonasdan-bootstrap-datetimepicker" by Eonasdan, it uses a modified version of that package, "lukewilson-bootstrap-datetimepicker".
Vue-Bootstrap-DatetimePicker
Vue.js v2.x component for eonasdan-bootstrap-datetimepicker
Demo on JSFiddle
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 ^3.3.7 (only css)
- jQuery >=1.8.3 || ^3.2.1
- Moment.js ^2.18
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.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/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/min/moment.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Date-picker itself -->
<script src="https://unpkg.com/[email protected]/build/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://unpkg.com/[email protected]/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="https://unpkg.com/[email protected]/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);
</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