Simple Vuejs Date Filter Example

Today, We want to share with you Simple Vuejs Date Filter Example.In this post we will show you How to bind a Date object to an input date using vue.js?, hear for How to Create Filters in Vue.js with Examples we will give you demo and example for implement.In this post, we will learn about Building a simple data filtering app with Vue js with an example.

Simple Vuejs Date Filter Example

There are the Following The simple About Simple Vuejs Date Filter Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue format date without moment, so the Advanced Vue.js concepts: mixins, custom directives, filters, transitions for this example is following below.

Vue.js Date Format Example

HTML Part

SetDate


MyDate: {{ changeDateFormat | date }}

{{$data|json}}

Vue JS Part

Vue.filter('date', {
  read: function (val) {
    return formatDate(parseDate(val));
  },
  write: function (val, oldVal) {
    var d = parseDate(val);
    return d ? formatDate(d) : val
  }  
});


new Vue({
  el: document.body,
  data: { changeDateFormat: new Date() },
})

function parseDate(str) {
  if(str === null || isActiveDt(str)) return str || null;
  var p = str.match(/^(\d{1,2})\/?(\d{1,2})?\/?(\d{2,4})?$/);
  if(!p) return null;
  return new Date(parseInt(p[3] || new Date().getFullYear()), parseInt(p[2] || (new Date().getMonth() + 1)) - 1, parseInt(p[1]), 0, 0, 0, 0);
}

function formatDate(dt) {
  if(dt == null) return '';
  var f = function(d) { return d < 10 ? '0' + d : d; };
  return f(dt.getDate()) + '/' + f(dt.getMonth() + 1) + '/' + dt.getFullYear();
}

function isActiveDt(d) {
    return Object.prototype.toString.call(d) === '[object Date]';
}

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple Vuejs Date Filter Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.