Moment.js - customize date formats

Introduction

In this article, we introduce how to use the Moment.js library, listed on the kintone CDN. We will display texts such as "xx mins ago" and ""xx days ago" in the date and time field. Standard JavaScript functions do not handle date and time formats, but the Moment.js library allows you to handle and calculate date formats easily.

What is Moment.js?

Moment.js is a JavaScript library used to alter, validate, calculate and display date and time data. The source code and documents can be found on their website.

Using Moment.js in kintone

You can utilize the Moment.js library in kintone by specifying the library link listed in the kintone CDN.
For example, you can specify one of the following urls to use Moment.js:


https://js.kintone.com/momentjs/2.13.0/moment.min.js
https://js.kintone.com/momentjs/2.13.0/moment-with-locales.min.js

 

Read through this article on how to specify libraries listed on the CDN through your kintone app.

How to Use Moment.js

    
//Set the locale
moment.locale('en');

//Get data from a date field
var date = kintone.app.record.get().record['my_dateandtime_field'].value;

//Format the date
moment(date).format('YYYY/MM/DD HH:mm');
//Result: "2017/01/25 11:01"

//Add 10 days
moment(date).add(10, 'day').format();
//Result: "2017-02-04T11:01:00-08:00"

//Calculate end of month
moment(date).subtract(1, 'month').endOf('month').format();
//Result: "2017-01-30T23:59:59-08:00"

//Get this week's Monday's date
moment(date).day('Monday').format();
//Result: "2017-01-30T11:01:00-08:00"

//Get today's day of the week
moment().format('dddd');
//Result: "Wednesday"

By using Moment.js like this, you can easily manipulate date formats.
For more information on how to use the Moment.js library, refer to their docs.

Using Moment.js on a Record List

Let’s try to customize kintone's Record List with Moment.js.
We'll use the following JavaScript code for the customization:

    
(function () {
    "use strict";
    //Initialize the locale
    moment.locale('en');
    
    // Set the Record List Event
    kintone.events.on('app.record.index.show', function(e) {
        // Get the date and time fields in the record list
        var elements = kintone.app.getFieldElements('my_dateandtime_field');
        
        // Display text formatted by Moment.js instead of the initial dates
        for (var i = 0; i < e.records.length; i++) {
            var date = e.records[i]['Updated datetime'].value;
            elements[i].innerText = moment(date).fromNow();
        }
    });
})();

The Result

The code will replace the text of the specified fields, with texts such as "xx hours ago" and "xx days ago".

Finally

Formatting date and time by using only standard JavaScript can be a troublesome task, but using Moment.js can help you save a lot of time and effort. Also, if you use a library called Moment Timezone, you can change to a different timezone by JavaScript. If you have any trouble handling Moment.js on kintone, go ahead to post your issue in the kintone developer network community.

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.