The form() method displays a modal dialog with the specified fields.
Availability:
Instead of building the form manually using the API, you can design it using a visual tool:
DayPilot.Modal.form(form[, data[, options]]);
The form array items have the following structure:
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); });
The field type doesn't always have to be specified explicitly for form items. When detecting the field type, the following rules will be applied:
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.
Traditional syntax (ES5):
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} } });
Example with async/await syntax (ES2017, not supported in IE):
var form = [ {name: "First Name", id: "first"}, {name: "Last Name", id: "last"} ]; var data = { first: "Jane", last: "Doe", id: 1204 }; const args = await DayPilot.Modal.form(form, data); if (!args.canceled) { console.log("data", args.result); // {first: "Jane", last: "Doe", id: 1204 }
Validation example:
var resources = [ {name: "Resource A", id: "A"}, {name: "Resource B", id: "B"}, {name: "Resource C", id: "C"}, ]; function validateTextRequired(args) { var value = args.value || ""; if (value.trim().length === 0) { args.valid = false; args.message = "Text required"; } else if (value.toLowerCase().includes("a")) { args.valid = false; args.message = "Text must not contain 'a'."; } else if (value.includes("2020")) { args.valid = false; args.message = "2020 not allowed."; } } var form = [ {name: "Text", id: "text", onValidate: validateTextRequired }, {name: "Note", id: "note", onValidate: validateTextRequired }, {name: "Start", id: "start", type: "date", onValidate: validateTextRequired}, {name: "End", id: "end", type: "date"}, {name: "Resource", id: "resource", options: resources, onValidate: validateTextRequired}, ]; var data = { start: "2020-11-01", end: "2020-11-02", resource: "B" }; DayPilot.Modal.form(form, data).then(function(modal) { console.log(modal); });