This article introduces the Date Input Button Plug-in, which is a plug-in version of the sample code introduced in the Add Today's Date to the Date Field with One Click article.
The plug-in allows users to relate which Date fields and Blank Space fields will be used in the customization through the GUI on the config page.

The packaged sample plug-in zip file can be downloaded from the Releases page on GitHub.
Install the plug-in into your domain by following the plug-in installation guide on the Help page .
You can then add the plug-in to a specific App by following the plug-in adding guide on the Help page .

Set your form up to support the plug-in by adding a Date field and a Blank Space field in your App. Give the Blank Space field an Element ID.

Relate the fields in the form with the options in the plug-in settings.
Save the settings, and update the App.

Now, when adding a new record, a button that interacts with the date field will be displayed.
Clicking it will insert today's date into the designated Date field.

The sample codes used in the plug-in are listed under the src file in our GitHub repository .
The plug-in is created with the following file structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

plug-in/
├── html/
│       └──── config.html
├── css/
│       ├──── 51-modern-default.css
│       └──── config.css
├── js/
│       ├──── config.js
│       ├──── desktop.js
│       └──── kintone-config-helper.js
├── image/
│       └──── icon.png
└── manifest.json

This file builds the HTML of the plug-in config page. A form tag is used to contain the config options and the Save/Cancel buttons.

Each "kintoneplugin-row" div contains HTML elements related to 1 config option.
The first "kintoneplugin-row" div contains the HTML of the first settings, where the user chooses which Date field the data will be added into. A select tag is stated in the HTML, that creates a drop-down field with a value of "-----". This drop-down field is later populated by the config.js file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="kintoneplugin-row">
  <label class="kintoneplugin-label" for="select-date-field">
    Date Field
    <span class="kintoneplugin-require">*</span>
  </label>
<p class="kintoneplugin-desc">Select a date field where the date will be inserted into.</p>
  <div class="kintoneplugin-select-outer">
    <div class="kintoneplugin-select">
      <select id="select-date-field" name="js-select-date-field" required>
        <option value="">-----</option>
      </select>
    </div>
  </div>
</div>

The second "kintoneplugin-row" div contains the HTML of the second settings, where the user chooses which Blank Space field to display the button in. A select tag is stated in the HTML, that creates a drop-down field with a value of "-----". This drop-down field is also later populated by the config.js file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="kintoneplugin-row">
  <label class="kintoneplugin-label">
    Button Space Field
    <span class="kintoneplugin-require">*</span>
  </label>
  <div class="kintoneplugin-desc">Select a Blank space field where the button will be displayed.<br />Blank space fields must have their Element IDs set in the Form settings.</div>
  <div class="kintoneplugin-select-outer">
    <div class="kintoneplugin-select">
      <select id="select-space-field" name="js-select-space-field" required>
        <option value="">-----</option>
      </select>
    </div>
  </div>
</div>

This CSS file is provided on GitHub . This file styles HTML elements on the plug-in config page to fit in with Kintone's UI.
We recommend that you do not make changes to 51-modern-default.css. If you need to style additional elements, or over-ride the default styles, those changes should be added into config.css.

This supporting CSS file is used to style some areas of the plug-in config page that 51-modern-default.css doesn't cover.

This file uses the kintone-config-helper library to help build out form elements for the plug-in config page.
When the plug-in config page loads, the functions setDropDownForDate and setDropDownForSpace are called sequentially.

1
2

setDropDownForDate()
  .then(setDropDownForSpace);

setDropDownForDate calls the KintoneConfigHelper.getFields method from the kintone-config-helper library.
By passing 'DATE' as the parameter, an array of field information of all Date fields are returned. The returned array is used to create lists of Date fields, and are appended to the drop-down stored in $date. If users have used this plug-in before, the CONF object should have some saved data stored inside. If so, the saved value for this settings is applied to the drop-down.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function setDropDownForDate() {
  // Create a dropdown menu containing a list of Date fields in the config.
  return KintoneConfigHelper.getFields('DATE').then(function(resp) {
    resp.forEach(function(field) {
      var $option = $('<option>');
      $option.attr('value', field.code);
      $option.text(escapeHtml(field.label));
      $date.append($option.clone());
    });
    // Set default value
    $date.val(CONF.date);
  }).catch(function(err) {
    return alert('Failed to retrieve field information of the Kintone App.');
  });
}

setDropDownForSpace calls the KintoneConfigHelper.getFields method from the kintone-config-helper library.
By passing 'SPACER' as the parameter, an array of field information of all Blank Space fields are returned. The returned array is used to create lists of Blank Space fields, and are appended to the drop-down stored in $space. If users have used this plug-in before, the CONF object should have some saved data stored inside. If so, the saved value for this settings is applied to the drop-down.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function setDropDownForSpace() {
  // Create a dropdown menu containing a list of Space fields in the config.
  return KintoneConfigHelper.getFields('SPACER').then(function(resp) {
    resp.forEach(function(field) {
      var $option = $('<option>');
      $option.attr('value', field.elementId);
      $option.text(escapeHtml(field.elementId));
      $space.append($option.clone());
    });
    // Set default value
    $space.val(CONF.space);
  }).catch(function(err) {
    return alert('Failed to retrieve field information of the Kintone App.');
  });
}

When the save button is clicked, the values set in the first and second settings are stored inside Kintone using the setConfig method.

1
2
3
4
5
6

config.date = date;
config.space = space;
kintone.plugin.app.setConfig(config, function() {
  alert('The plug-in settings have been saved. Please update the app!');
  window.location.href = '/k/admin/app/flow?app=' + kintone.app.getId();
});

This file runs on the regular pages of the App, such as the Record List and Record Details pages, but not on the plug-in config page. This file uses the sample code included in the article " Add Today's Date to the Date Field with One Click ". However, unlike the code in the article, the code in desktop.js is wrapped in an immediate function with the plug-in ID value as the input parameter. The plug-in ID value is needed for several JavaScript API calls.

1

var CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID);

Data retrieved with the kintone.plugin.app.getConfig(PLUGIN_ID) method are allocated to variables.

1
2

var CONFIG_DATE = CONFIG.date;
var CONFIG_SPACE = CONFIG.space;

When the app.record.create.show and app.record.edit.show event is triggered (when the Record Create page or the Record Edit page loads), the kintone.app.record.getSpaceElement() method is used to get the element of the Blank Space field that was specified in the Plug-in config page. A button is created, and appended onto this element. When clicked, the button places in the value of today's date into the Date field specified in the Plug-in config page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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(CONFIG_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[CONFIG_DATE].value = today;
    kintone.app.record.set(rec);
  };
  return event;
});

The kintone-config-helper.js file is a library that supports the development of the plug-in config page. View the Introduction to Kintone Config Helper article for more details.

It also links to the jQuery library hosted on the Kintone CDN and the kintone-config-helper library so that it can be called on the plug-in config page.

1
2
3
4
5
6
7

"config": {
  "html": "html/config.html",
  "js": [
    "https://js.kintone.com/jquery/3.3.1/jquery.min.js",
    "js/kintone-config-helper.js",
    "js/config.js"
  ]

The array in the value of the required_params key states which settings in the plug-in config page are required. If these settings are not saved using the setConfig API , errors will be displayed on other pages of the App, stating that the plug-in settings have not been configured yet.

1
2
3
4

"required_params": [
  "date",
  "space"
]

The name, description, and homepage_url key-value pairs are labels and links displayed in the plug-in config pages.

1
2
3
4
5
6
7
8
9

"name": {
  "en": "Date input button Plug-in"
},
"description": {
  "en": "This sample inserts today's date into a Date field of your App with a click of a button."
},
  "homepage_url": {
  "en": "https://kintone.dev/en/plugins/simple-samples/date-input-button-plug-in/"
}

This plug-in is open sourced under the MIT License . It allows open- or closed-sourced distribution, including commercial use.
If you would like to add more functionality to the plug-in, you are welcome to clone our repository to make your own changes and redistribute it. We generally do not accept external pull requests for the sample plug-in as this repository exists for educational purposes.
If you have any questions related to building Kintone plug-ins, please post your question in the Kintone Developer Program Community Forum .

This sample plug-in was created with the contribution of Fuji Business International
Mamoru Fujinoki - LinkedIn