Load a List (from data source) with entries based on a specific date

Often you will have data sources with a Date field. This could include news items, upcoming birthdays for staff, dates for events, or many other options.

The List from Data Source is a powerful prefab component in Fliplet Studio that will help you easily display these items and sort them by date. However, to filter by date, especially compared to a relative date such as ‘today’ you will need to use a small piece of Javascript code. This code should be placed in the screen Javascript section of the developer options on a screen with a relevant List from Data Source component.

The code snippet example here uses MomentJS (included in all your Fliplet apps) to make a value for today and query the data source to only get items with a Date field that is greater than or equal to today, thereby only displaying entries from today onwards:

Fliplet.Hooks.on('flListDataBeforeGetData', function(options) {
    options.config.dataQuery = {
      where: {
        //change 'Date' below to the name of your date column in the data source 
        Date: { $gte: moment().format('YYYY-MM-DD') }
      }
    }
});

Please note – $gte means “greater than or equal to.” You also have the following options to replace with:

• $gt – greater than
• $lte – less than or equal to
• $lt – less than

You can explore further options through the MomentJS library. For example, if you want to show entries since the start of the current week then you would simply change the Moment format on line 5 above to something like this:

Date: { $gte: moment().startOf('isoWeek').format('YYYY-MM-DD') }

The Moment format should match your data, but Fliplet strongly recommends using the YYYY-MM-DD format.