Home » Date filtering and formatting in VueJS with Example

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!.

Read Also:  Create Video Background Website using Bootstrap HTML5

Include External Libs

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

index.html

<button>Live SetDate</button>
<br />
MyDate: {{ mydate | date }}<hr />
{{$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

Read Also:  Vuejs currency filter 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.

Read Also:  How to write PHP code inside of Laravel Blade template?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Timestamp Date Time format Function
  2. Read Also:  Filter (Search) Table using Angular Example
  3. Read Also:  Simple Vuejs Date Filter Example
  4. Read Also:  Laravel 6 Inserting & Updating Eloquent Models
  5. Read Also:  CSS Modal Popup Box Window Plugins
  6. Read Also:  PHP Tutorial
  7. Read Also:  PHP cURL Multiple Asynchronous Http Requests
  8. Read Also:  How to Declare Global Variable in Laravel 6?
  9. Read Also:  How to write SQL Sub Query in PHP with MySQLi
  10. Read Also:  Managing Dates and Times Using Vue.js?

Leave a Comment

Your email address will not be published. Required fields are marked *