Customize Date Formats

Contents

Overview

This article introduces how to customize date formats in Kintone Apps using Luxon. With this library, date formats in Kintone can be displayed in other formats, such as "5 days ago" and "tomorrow".

Prepare the App

Create the Form

Create an App (External link) with the following field settings.

Field Type Field Name Field Code
Text Ticket name ticketname
Updated datetime Last updated lastupdate

Set the Library

This sample uses Luxon (External link) v2.3.0. Set the following URL into the App's JavaScript and CSS Customization settings (External link) .

  • https://js.kintone.com/luxon/2.3.0/luxon.min.js

Sample Code

Type the following code into a text editor and save it as a JavaScript file. Upload it to the App's JavaScript and CSS Customization settings (External link) .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

(function() {
  'use strict';
  luxon.Settings.defaultLocale = 'en-US'; // Sinitialize the locale
  var datetimefield = 'lastupdate'; // field code of a datetime field

  // Set the Record List Event
  kintone.events.on('app.record.index.show', function(e) {
    // Get the datetime fields in the record list
    var elements = kintone.app.getFieldElements(datetimefield);

    // Display text formatted by Luxon instead of the initial dates
    for (var i = 0; i < e.records.length; i++) {
      var date = e.records[i][datetimefield].value;
      elements[i].innerText = luxon.DateTime.fromISO(date).toRelative(); // Change to Luxon format
      elements[i].style.verticalAlign = 'middle'; // Align to center
    }
    return e;
  });
})();

caution
Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Luxon library is uploaded before the sample JavaScript file. The order of the uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

After saving the settings and updating the App, navigate to the Record List page. The Updated datetime field should display the date in a new format, such as "X hours ago" and "X days ago".

Reference