Filters Separated By Namespaces Vue.js

Filters Separated By Namespaces Vue.js

by shivkumarganesh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id="app">
  <span>Date in MM/DD/YYYY  -->  {{date | date_format.MM/DD/YYYY}}</span>
  <br>
  <span>Date in MMMM Do YYYY, h:mm:ss a  -->  {{date | date_format.MMMM Do YYYY, h:mm:ss a}}</span>
  <br>
  <span>Date in dddd  -->  {{date | date_format.dddd}}</span>
</div>

JavaScript

Vue.filter('date_format.MM/DD/YYYY', function(value) {
  return moment.unix(value).format('MM/DD/YYYY')
});

Vue.filter('date_format.MMMM Do YYYY, h:mm:ss a', function(value) {
  return moment.unix(value).format('MMMM Do YYYY, h:mm:ss a')
});

Vue.filter('date_format.dddd', function(value) {
  return moment.unix(value).format('dddd')
});

var app = new Vue({
  el: '#app',
  data: {
    date: 1501288640
  }
});