vuejs-datepicker vuejs datetimepicker – Vuejs Calendar Example

vuejs-datepicker vuejs datetimepicker – Vuejs Calendar Example

A simple datepicker Vue component.support Compatible with Vue version 1.x and Vue 2.x version and A simple example of Vue.js datepicker component. Supports disabling of all the dynemically dates, inline mode and translations

Usage

Install

First of all install all the libs.

$ npm install vuejs-datepicker --save

Date formatting

Include Scripts

• jquery.min.js
• vue.min.js
• bootstrap.min.css
• bootstrap.min.js
• bootstrap-datepicker3.min.css
• bootstrap-datepicker.min.js

Example of vuejs-datepicker vuejs datetimepicker

index.html

<h1>vuejs datetimepicker Example by Pakainfo.com</h1>
<div id="liveapp">
  
  <br />
  <br />
  <br />
  <br />
</div>

index.js

var datepickerComponent = Vue.extend({
  //v-el:select
  template: '<div class="input-group date">' +
    '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
    '</div>',
  props: {
    value: '2019-04-25'
  },
  data: function() {
    return {};
  },
  ready: function() {
    $(this.$els.inputgroup).datepicker({
      format: 'yyyy/mm/dd',
      autoclose: true
    });
  }
});

Vue.component('datepicker', datepickerComponent);

new Vue({
  el: '#liveapp',

  data: {
    startDate: '2019-04-25',
  },
  ready: function() {},
  methods: {},
  watch: {
    startDate: function() {
    	alert("DATA: " + this.startDate);
    }
  }
});

Example

Demo