Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue datepicker

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Select the date from an input field (you can select it inside the popup calendar).

You may want to use this kind of fields inside signup forms or booking forms.

By default it shows the current date.

Date picker example

The example below uses bootstrap to style it, but you can use any css.

It gets the current date using the function getDate(). This is required to set the start date.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vue bootstrap datepicker</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker3.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.container {
width: 200px;
padding-top: 10px;
left: 10px;
position: absolute;
}
</style>
<script type="text/javascript">

function getDate () {
const toTwoDigits = num => num < 10 ? '0' + num : num;
let today = new Date();
let year = today.getFullYear();
let month = toTwoDigits(today.getMonth() + 1);
let day = toTwoDigits(today.getDate());
return `${day}/${month}/${year}`;
}

//<![CDATA[
window.onload=function(){

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

Vue.component('datepicker', datepickerComponent);

new Vue({
el: '#app',

data: {
startDate: getDate(),
},
ready: function() {},
methods: {},
watch: {
startDate: function() {
//alert("DATE: " + this.startDate);
}
}
});

}
//]]>
</script>
</head>
<body>
<div class="container">
<div id="app">
<datepicker :value.sync="startDate"></datepicker>
</div>
</div>

</body>
</html>


© vuejsexamples.net - Privacy Policy - Cookie Policy