Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue datepicker

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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.


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vue bootstrap datepickertitle>
<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}`;
}

//
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>' +

'',
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