Simple Vuejs Date Filter Example

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.

  Laravel JOIN Multiple Tables Eloquent Relationships

Vue.js Date Format Example

HTML Part

<input type="text" v-model="changeDateFormat | date" />
<button v-on="click: changeDateFormat = new Date()">SetDate</button>
<br/>
MyDate: {{ changeDateFormat | date }}<hr/>
{{$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 :

  VueJS Convert Comma separated String To Array Example

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.

Leave a Reply

avatar
  Subscribe  
Notify of