How to add nunjucks-date-filter? - json

Question

I can't understand where should i put all this code ,
https://github.com/e-picas/nunjucks-date-filter
i have this structure
enter image description here
this is my template
<div class="container">
<div class="row">
<div class="col-5">
{% for date, block in block | groupby("date") %}
<div class="date">{{ date}}</div>
{% for name, block in block | groupby("name") %}
<div class="about">{{ name }}</div>
{% endfor %}
{% for id, block in block | groupby("id") %}
<div class="id">{{ id }}</div>
{% endfor %}
{% for blocks in block %}
<img onError="this.src='/img/no-photo.png'" src="{{blocks.image}}" alt="">
{% endfor %}
{% endfor %}
</div>
</div>
</div>
at this moment i have a date format from Json file like this dd-mm-yyyy , want to change it with filter to D-MMM.

Answer 1

I was in a similar situation. The nunjucks-date-filter readme recommends using the Nunjucks Environment API to add filters. But I found this doesn't work as the env object was never applied to the Nunjucks instance.
Here's how I got around it, assuming you're using express:
// main.js
const app = express();
const nunjucks = require('nunjucks');
const dateFilter = require('nunjucks-date-filter');
function setUpNunjucks(expressApp) {
let env = nunjucks.configure('views', {
autoescape: true,
express: app
});
// note that 'date' is the function name you'll use in the template. As shown in nunjucks-date-filter's readme
env.addFilter('date', dateFilter);
}
setUpNunjucks();
Then in your template just define the date format you want:
{% for date, block in block %}
<div class="date">{{ date | date("D MMM") }}</div>
{% endfor %}