Format date in rare way

#1

Hi all! Quick question from a newbie:

It is possible to format:

“08-12-2023” to “First half of november” (in french)

“21-12-2023” to “Second half of november” (in french)

What would be the simplest method?

#2

Are you using nodejs? That’s easy with a custom formatter.

Install date-fns
npm I date-fns

Create the files dateHalfFormatter.js and dateHalfFormatter.hjson in /extensions/server_connect/formatters.

dateHalfFormatter.js

const { format, parse } = require("date-fns");
const { fr } = require("date-fns/locale");

function dateHalfInFrench(dateString) {
    const date = parse(dateString, "dd-MM-yyyy", new Date());
    const day = date.getDate();
    const month = format(date, "MMMM", { locale: fr });

    if (day <= 15) {
        return `Première quinzaine de ${month}`;
    } else {
        return `Deuxième quinzaine de ${month}`;
    }
}

exports.dateHalfInFrench = dateHalfInFrench;

dateHalfFormatter.hjson

{
  type: "method_dateHalfInFrench",
  groupTitle: "Date Formatter",
  groupIcon: "fa fa-lg fa-calendar",
  addTitle: "Date Half In French",
  title: "Date Half In French",
  icon: "fa fa-lg fa-calendar",
  state: "opened",
  help: "Converts date string to first or second half of the month in French.",
}
2 Likes
#3

The solution provided by Tobias is for server side custom extension. Which will not work for common cases where your data comes from queries, and you just need to format the value on client side binding.

To use the same library on client side, you can include this JS on your page:
https://www.jsdelivr.com/package/npm/date-fns?tab=files

Next, you need a client side custom formatter, for which you can find reference to here (ignore PHP part in the post, client-side things are same for all server models): Creating Custom Formatters (PHP and client-side)

Then, you can use the function Tobias has shared inside the formatter definition.
Lastly, to use this new formatter, you will have to manually type the binding in the UI to something like:
date_field_from_db.formatToText()
Here, formatToText will be the name of your client side formatter function.

1 Like
#4

I do all this rare formatting using case statements in database views.
They have literally changed my life! :rocket:

1 Like
#5

As long as its used rarely, case-when statements are ok. But they can cause performance issues for large tables and complex queries.

3 Likes
#6

Thanks @tbvgl!

I was trying to explore this solution, but the moment I place the dateHalfFormatter.js with your conde inside /extensions/server_connect/formatters wappler breaks. I’m no longer able to go to preview the site until I remove the file.

Any idea why it could be? I’m too newbie to fix it on my own.

Thank you, appreciate a lot your help.

#7

Turns out date-fns was not installed, that’s why was crashing.

Seems every time I hit deploy date-fns is not installed anymore!

Is there a way to avoid this from happening and make things persistent? :exploding_head:

#8

Check your packages.json file, and insure the date-fns package exists.
It usually gets added automatically when you run npm I date-fns.

#9

It dosnt exists!

Do you know if npm I date-fns is the same than npm i date-fns?

With first one I get this:

root@4658348822de:/opt/node_app/node_modules# npm I date-fns
Unknown command: "I"
#10

I just copied the command from original post… which looks like a typo. It should be i, or any of the aliases here: https://docs.npmjs.com/cli/v8/commands/npm-install
I personally use npm install xxx.

1 Like
#11

Yeah, my bad. I wrote the original response from my phone and added an uppercase I by accident.

#12

@sid and @tbvgl thanks to both of you! Without your help I would not have been able to do it.