In this tutorial, we are going to learn how to create a date filter using the moment.js javascript library. There will be 4 filters we are going to create./p>

• dateFormat Filter
  

  This filter will be the basic date that will return a date of given date using the format of DD MMM YYYY. Example of this filter value will be: 12 Dec 2019.

• dateMonthYearFormat Filter
  

  This filter will be used to return a month and year of given date. Example of this filter date will be: December 2019.

• dateWithTimeFormat Filter
  

  This filter will be used to return a date with time of given date. Example of this filter date will be: 12 Dec 2019 23:49:52 PM.

• timeFormat Filter
  

  This filter will be used to return a time only of a given date. Example of this filter date will be: 23:49:52 PM.

To make it easier, I am going to include the scripts Vue.js as an external script rather than using CLI. I will include the moment.js library as well. Here is the path of our script files.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Here will be the full HTML code. We wrap the code inside a div tag with id named app which will be used for Vue.js to identify our Vue.js app. We are going to create a Vue.js variable named currentDate that is going to used to hold the current date information. In Vue.js, if you want to use the filter and display it as an HTML element. You need to wrap it with open and close double curly symbols and inside those symbols, you need to include a pipeline symbol with the filter name. You can see we have 4 different types of a filter as below.

<div id="app">
	<div class="form-group">
		<table>
			<tr>
				<td>Date Filter :</td>
				<td>{{ currentDate | dateFormat }}</td>
			</tr>
			<tr>
				<td>Month and Year Filter :</td>
				<td>{{ currentDate | dateMonthYearFormat }}</td>
			</tr>
			<tr>
				<td>Date with Time Filter :</td>
				<td>{{ currentDate | dateWithTimeFormat }}</td>
			</tr>
			<tr>
				<td>Time Filter :</td>
				<td>{{ currentDate | timeFormat }}</td>
			</tr>
		</table>
	</div>
</div>

The next part is to write our Vue.js script application. We are going to declare our 4 constant variables of filter types and register them as Vue.js filters.

<script>
const dateFormat = function (str) {
	if (str != null) {
		return moment(str).format("DD MMM YYYY");
	}
	return "";
};

const dateMonthYearFormat = function (str) {
	if (str != null) {
		return moment(str).format("MMMM YYYY");
	}
	return "";
};


const dateWithTimeFormat = function (str) {
	if (str != null) {
		return moment(str).format("DD MMM YYYY HH:mm:ss A");
	}
	return "";
};

const timeFormat = function (str) {
	if (str != null) {
		return moment(str).format("HH:mm:ss A");
	}
	return "";
};

const filters = {
	dateFormat,
	dateMonthYearFormat,
	dateWithTimeFormat,
	timeFormat
};

//register the filters in Vue
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

var app = new Vue({
  el: '#app',
  data: {
	currentDate: new Date()
  }
})
</script>

Quick Demo of Vue.js date filter using moment.js library.

Here is the quick demo result of the Vue.js app based on the current date.

If you have any questions regarding this tutorial, feel free to post your question below. I have included the download file as well for you to learn and see.

Demo Files

You can download the sample code below.

Download