Level 11
Write your own filter: https://vuejs.org/guide/custom-filter.html
1 like
Jun 22, 2016
6
Level 2
How to change date format in Vue Js?
Using Vue JS and Laravel data is fetching from table and listing in a view page. At-present date format is getting like '2016-06-05 16:41:00'. But I need to change the date format to '05-06-16' in view page. Please help me to change the date format using Vue Js.
<td>@{{ religion.created_at }}</td>
#sample view code
<tr v-for="(index, religion) in religions | orderBy 'id' -1">
<td><input type="checkbox" id="checkbox" aria-label="checkbox" value="checkbox"></td>
<td>@{{ index + 1 }}</td>
<td>@{{ religion.religion | capitalize }}</td>
<td v-if="religion.status == 'publish'">
<span class="glyphicon glyphicon-ok"></span>
</td>
<td v-else>
<span class="glyphicon glyphicon-remove"></span>
</td>
<td>@{{ religion.created_at }}</td>
<td><button type="button" class="btn btn-default" @click="EditReligion(religion.id)">
<span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="Edit"></span>
</button>
<button type="button" class="btn btn-default" @click="removeReligion(religion.id)">
<span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Delete"></span>
</button>
</td>
</tr>
Level 5
You can create a custom vue filter or you can change the date in php with Carbon if that's where your data is coming from.
Level 16
Yes, write a filter and you can format the date as you want. Take a look at http://momentjs.com for parsing dates.
Level 54
Here's a pretty basic Vue filter, basically just a wrapper around moment's format method for dates:
exports.install = function (Vue, options) {
Vue.filter('moment', function (date, format) {
if (!date) {
return 'N/A'
}
return moment(date, 'YYYY-MM-DD').format(format);
});
};
2 likes
Level 2
My way of doing this:
var moment = require('moment');
require('moment/locale/en-gb'); // locales all in lower-case
exports.install = function (Vue, options) {
Vue.prototype.moment = function (...args) {
return moment(...args);
};
}
Vue.use(exports);
// note that the above is declared before instantiation of Vue
const app = new Vue({
el: '#app'
});
This allows you to use like so:
{{ moment("2016-10-14", "YYYY-MM-DD").format("ll") }} //---> 14 Oct 2016
3 likes
Level 54
People have already linked to the vue docs..
Please or to participate in this conversation.