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

Date Format Token Short Desc Live Example
d day 1
dd 0 prefixed day 01
D abbr day Mon
su date suffix st, nd, rd
M month number (1 based) 1 (for Jan)
MM 0 prefixed month 01
MMM abbreviated month name Jan
MMMM month name January
yy two digit year 17
yyyy four digit year 2017
READ :  C# Prime Number Program Tutorial with Examples

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

Add a Comment

Your email address will not be published. Required fields are marked *