Date filtering and formatting in VueJS with Example

Date filtering and formatting in VueJS with Example

In this Post We Will Explain About is Date filtering and formatting in VueJS with Example With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to javascript – Format Date time in vuejs Example

In this post we will show you Best way to implement Convert JSON date to JavaScript date in vuejs, hear for vuejs Set Custom Date Format Using Date Filter with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Include External Libs

https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.4/vue.js

index.html

Live SetDate


MyDate: {{ mydate | date }}

{{$data|json}}

index.js

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

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

// super simple pt-BR date parser
function parseDate(liveString) {
if(liveString === null || isDate(liveString)) return liveString || null;
var p = liveString.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);
}

//Pakainfo.com super simple pt-BR date format
function vueDateformat(sdate) {
if(sdate == null) return '';
var f = function(d) { return d < 10 ? '0' + d : d; };
return f(sdate.getDate()) + '/' + f(sdate.getMonth() + 1) + '/' + sdate.getFullYear();
}

//date in Vue  is object a date?
function isDate(d) {
return Object.prototype.toString.call(d) === '[object Date]';
}

vuejs Date Filter with Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is vuejs Set Custom Date Format Using Date Filter And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.