How to add nunjucks-date-filter?

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 %}