vue-bootstrap-datetimepicker

Vue-Bootstrap-DatetimePicker

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

Installation

# npm
npm install vue-bootstrap-datetimepicker --save

# Yarn
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 required dependencies
  import moment from 'moment';
  import jQuery from "jquery";
  import 'bootstrap';
  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(),       
      }
    },
    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'

Install in non-module environments (without webpack)

• Acquire required files

<!-- Date-picker dependency-->
<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">
<!-- Date-picker itself -->
<script src="bootstrap-datetimepicker.min.js"></script>
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Vue js -->
<script src="vue.min.js"></script>
<!-- Lastly add this package -->
<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>
  //Initialize as global component
  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

Changelog

2.2.0

• Rollback importing css, component is no longer importing any css
  • This also applies when using this package as plugin Vue.use()