Add Today's Date to the Date Field with One Click

Contents

Overview

This sample inserts today's date into a Date field of your App with a click of a button.

To use this sample code, you will need a Date field and a Blank space field in your Kintone App.
A button will be displayed on the Blank space field, when you create a new record or edit an existing record.

Sample Image

To use this sample code, a Date field and a Blank space field is needed in the Kintone App.
A button is displayed on the Blank space field, when a user creates a new record or edits an existing record.

Prepare the App

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

Field Type Field Name Field Code / Element ID Notes
Date Date mydate
Blank Space - myspace

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of 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
23
24

// A button will be placed on the Blank Space field
// Click the button to add today's date into the date field

(function() {
  'use strict';
  var DATE = 'mydate'; // field code of date field
  var SPACE = 'myspace'; // element ID of Blank Space field (this is where the button will be displayed)

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
    var btn = document.createElement('button');
    btn.textContent = 'Input Today\'s Date';
    kintone.app.record.getSpaceElement(SPACE).appendChild(btn);

    btn.onclick = function() {
      var date = new Date();
      var today = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

      var rec = kintone.app.record.get();
      rec.record[DATE].value = today;
      kintone.app.record.set(rec);
    };
    return event;
  });
})();

After saving the settings and clicking on Update App, start creating a new record. A button should appear where the Blank space field is placed. Click the button to input today's date into the Date field.