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.
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
$ 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 |
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);
}
}
});