Vue.js check valid date


We can create simple function to check valid date in vue.js. Here in this tutorial, we are going to explain how you can create custom function to validate date in vuejs. You can also use our online editor to edit and run the code online.


Vue.js check valid date Example

You can chec valid date in vuejs simply as below –

Example:

<div id="app">	
	<p>{{msg1}}</p>
	<p>{{msg2}}</p>
	<button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
el: '#app',
  
  data: { 
	  date1 :"25/12/2018",
	  date2 :"23/2019",
	  msg1:'',
	  msg2:''
  },
  
   methods:{
    myFunction: function () {	
		if(this.isValidate(this.date1)){
		this.msg1 = this.date1+' is valid date.';
		}else{
		this.msg1 = this.date1+' is not valid date.';	
		}
		if(this.isValidate(this.date2)){
		this.msg2 = this.date2+' is valid date.';
		}else{
		this.msg2 = this.date2+' is not valid date.';	
		}
    },
	isValidate: function(dateStr) {
    s = dateStr.split('/');
    d = new Date(+s[2], s[1]-1, +s[0]);
    if (Object.prototype.toString.call(d) === "[object Date]") {
        if (!isNaN(d.getTime()) && d.getDate() == s[0] && 
            d.getMonth() == (s[1] - 1)) {
            return true;
        }
    }
    return false;
}
   }

});
</script>      

Try it »

Output of above example-

Vue.js check valid date

Advertisements

Add Comment

📖 Read More