vue-bootstrap-datetimepicker

Vue-Bootstrap-DatetimePicker

Vue.js v2.x component for eonasdan-bootstrap-datetimepicker

Installation

npm install vue-bootstrap-datetimepicker --save
# OR
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 (optional if you include standalone css)
• jQuery >=1.8.3
• Moment.js ^2.10

Example

<template>
  <div>
    <date-picker v-model="date"></date-picker>
  </div>
</template>

<script>
  // Import required dependencies
  import 'moment';
  window.$ = window.jQuery = require('jquery');
  import 'bootstrap';
  import datePicker from 'vue-bootstrap-datetimepicker';
  // You have to add CSS yourself
  import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
  // Bootstrap css  
  import 'bootstrap/dist/css/bootstrap.css';
  
  export default {    
    data () {
      return {
        date: new Date(),       
      }
    },
    components: {
      datePicker
    }
  }
</script>

Props

The component accepts these props

Attribute	Required	Type	Description
v-model	Yes	String / Date Object / moment/ null	Set or Get date-picker value
config	No	Object	Datetime picker configuration options
placeholder	No	String	Set placeholder on input
input-class	No	String / Object	Add CSS class to input
input-name	No	String	Set input field name
required	No	Boolean	Make input field required
read-only	No	Boolean	Make input field read-only
disabled	No	Boolean	Make input field disabled
wrap	No	Boolean	Set this to true when wrapped in 'input-group'

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
• Date range example with two inputs
• Update to webpack v3.0

License

MIT License

Changelog

1.1.0

• Reactive configs