DayPilot.Modal.form

The form() method displays a modal dialog with the specified fields.

Available in DayPilot Pro since version 2019.4.4153. Also available in the standalone DayPilot.Modal library (open-source) since version 3.0.

Declaration

DayPilot.Modal.form(form[, data[, options]]);

Parameters

• form (array) - the modal dialog fields
• data (object) - the source data object (it will be used to fill the initial values)
• options (object) - an object that specifies custom DayPilot.Modal properties

Form Fields

The form array items have the following structure:

• name (string) - the field name that will be displayed as a description
• id (string) - the field id; it will be used to load the data from the data object and to store the value in args.result object
• type ("text" | "select" | "date") - the field type; optional - if not specified, the type will be auto-detected
• dateFormat (string) - the date/time format used for "date" fields; it uses the patterns from DayPilot.Date.toString()
• options (array) - the items used for "select" fields; each item is an object with name (item text) and id (item value) properties

Example:

var form = [
  {name: "First Name", id: "first"},
  {name: "Last Name", id: "last"},
  {name: "Birthday", id: "birthday", dateFormat: "MMMM d, yyyy"}
];
DayPilot.Modal.form(form).then(function(args) { console.log(args.result); });

Field Type Detection

The field type doesn't have to be specified explicitly for form items. When detecting the field type, the following rules will be applied:

• If the form item has options value specified, "select" type will be used
• If the form item has dateFormat value specified, "date" type will be used
• Otherwise, the "text" field type will be used.

Return Value

A Promise. The success handler of the promise will be called when the modal dialog is closed (using either the Cancel button or by clicking the background). The failure handler is never called.

The success handler receives the args parameter from onClosed event handler.

Tutorial

• JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog

Example

var form = [
  {name: "First Name", id: "first"},
  {name: "Last Name", id: "last"}
];

var data = {
  first: "Jane",
  last: "Doe",
  id: 1204
};

DayPilot.Modal.form(form, data).then(function(args) {
  if (!args.canceled) {
    console.log("data", args.result);   //  {first: "Jane", last: "Doe", id: 1204}
  }
});