Disabling keypresses in datetime fields

From pmusers
Jump to: navigation, search

Use JavaScript to disable keypresses in datetime fields in a Dynaform, so the user is forced to use the graphical date picker dialog to select the datetime. This example shows how to disable keypresses in datetime fields outside a grid and inside a grid.


DynaForm: Disable keypresses in datetimes.json (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-05-23)
Tested in: ProcessMaker 3.2.1 Community in Debian 8.4 with Firefox 51



Create a DynaForm with a datetime whose ID is "dueDate". Then, create a grid with the ID "products" which contains a datetime field with the ID "launchDate".

Then, add the following JavaScript to the DynaForm:

//disable keypresses in the "dueDate" datetime field:
$("#dueDate").getControl().keypress(function() {
  return false;
})

//disable keypresses in the "launchDate" datetime fields in the "products" grid:
var nRows = $("#products").getNumberRows();
for (var i = 1; i <= nRows; i++) {
  $("#form\\[products\\]\\["+i+"\\]\\[launchDate_label\\]").keypress(function(){return false;});
}

$("#products").onAddRow( function(aNewRow, oGrid, rowIndex) {
  $("#form\\[products\\]\\["+rowIndex+"\\]\\[launchDate_label\\]").keypress(function(){return false;});
});

Returning false in the keypress event handler will stop the keypress from being used by datetime field. Datatime fields have a visible input field with the ID "form[datetime-id_label]" and a hidden field with the ID "form[datetime-id]". With datetime fields outside grids, the getControl() method can be used to obtain the "form[datetime-id_label]" input field.

For datatimes inside grids, the input field needs to be directly accessed using a jQuery selector:

$("#form\\\\[grid-id\\\\]\\\\[row-number\\\\]\\\\[datetime-id_label\\\\]")

In jQuery selectors, IDs which contain [ or ] need to be escaped with a double backslash as \\[ and \\].

When the DynaForm loads, the code loops through each row in the "products" grid to set a keypress event handler for the datetime field in each row. It also uses onAddRow() to add a keypress event handler to the datetime field in each new row which is added to the grid.