Vue-Bootstrap-DatetimePicker
Vue.js v2.x component for eonasdan-bootstrap-datetimepicker
Installation
npm install vue-bootstrap-datetimepicker --save
yarn add vue-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 any changes and apply them
- Play nice with vee-validate validation library
Requirements
- Vue.js ^2.0.0
- Bootstrap ^3.3.7
- jQuery >=1.8.3
- Moment.js ^2.10
Usage
<template>
<div>
<date-picker v-model="date"></date-picker>
</div>
</template>
<script>
import moment from 'moment';
import jQuery from "jquery";
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import datePicker from 'vue-bootstrap-datetimepicker';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
export default {
data () {
return {
date: new Date(),
}
},
components: {
datePicker
}
}
</script>
As plugin
import Vue from 'vue';
import {DatetimePickerPlugin} from 'vue-bootstrap-datetimepicker';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
Vue.use(DatetimePickerPlugin);
This will register a global component <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 |
placeholder | String | '' | Set placeholder on input |
input-class | String / Object | '' | Add CSS class to input |
name | String | datetime | Set input field name |
required | Boolean | false | Make input field required |
read-only | Boolean | false | Make input field read-only |
disabled | Boolean | false | Make input field disabled |
wrap | Boolean | false | Set this to true when wrapped in 'input-group' |
id | String | '' | Set input field id |
Install in non-module environments (without webpack)
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-datetimepicker.min.js"></script>
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="vue.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-datetimepicker"></script>
- Use the component anywhere in your app like this
<main id="app">
<date-picker v-model="date"></date-picker>
</main>
<script>
Vue.component('date-picker', VueBootstrapDatetimePicker.default);
new Vue({
el: '#app',
data: {
date: null
},
});
</script>
Run examples on your localhost
- Clone this repo
- Make sure you have node-js >=6.10 and npm >=4.6.1
- Install dependencies
npm install
- Run webpack dev server
npm run dev
- This should open the demo page at
http://localhost:8080
todo
- Inline mode, who uses it ?
Changelog
Changelog for each release can found here
License
MIT License