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.

Animated GIF: User clicks the button to add today's day to the date field.

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.

Animated GIF: User clicks the button to add today's day to the date field.