Show Day of the Week on Date Fields

Contents

Overview

This article introduces how to display the day of the week next to the Date field.

Sample Image

In this example, the customization runs when the Record detail page is displayed. The value of the Date field is retrieved and the day of the week is calculated. The day of the week is then inserted next to the Date field's value.

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the 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
20
21
22


(function() {
  'use strict';

  var DATE = 'due_date'; // field code of date field

  kintone.events.on(['app.record.detail.show'], function(event) {
    var record = event.record;

    var weekchars = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var date = new Date(record[DATE].value);
    var day = weekchars[date.getUTCDay()];

    var dayEl = document.createElement('span');
    dayEl.textContent = ' (' + day + ')';

    var dateEl = kintone.app.record.getFieldElement(DATE);
    dateEl.appendChild(dayEl);

    return event;
  });
}());