Date and Time Fields

In the form designer, there is a single Date Time field that can be configured for both date and time values. In the classic form designer, the date and time fields are specialized field types that accept dates and times. Date time fields allow the user to select a date using a calendar picker or by typing in the input box. You can specify the date and time format and accepted range.

Settings

Editing a Date and Time Field in the Form Designer

Select the field on the canvas, and the options will appear in the right pane.
Under Field label, enter the field label that will appear next to the field on the form.
Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text.
Under Display options, select Required if users must fill in this field before submitting the form. Select Read-only if users should not be allowed to modify this field. For date fields, select Show time to allow users to specify a time along with the calendar date.

Note: If a required field is hidden with a field rule, it is no longer required. A required field is only required when it appears on the form.

Under Date format, specify how the date will appear using .NET formatting. This is the same formatting used to edit Laserfiche Workflow date tokens. Learn more.
For date fields, select Show Time to allow users to specify a time along with the calendar date.
- If you are editing a time field or a date field with Show Time selected: Under Time format, specify how the time will appear.
Under Default Date, enter the value that will appear in the field by default. If this option is blank, the field will appear empty by default. Use the Insert variables button to insert a date already associated with the process or form, or to insert the Date variable. Additionally, you can check the Current Date box to use today's date.

Note: If the field is set to read-only, the Date variable will be replaced by the date the form is submitted. If the field is not read-only, the Date variable will be replaced by the date the form is first opened.

To configure advanced options, click the Advanced tab.

Under Calculation, specify a formula that will populate the contents of this field. Learn more.

Under Date Validation, select from the following options:

Note: A valid date is required for date validation - if using a form variable, it must have a value on form load for validation to function.

No earlier than, prevents users from selecting a date/time earlier than specified. Select one of the options and set available specifics accordingly.
No later than, prevents users from selecting a date/time earlier than specified. Select one of the options and set available specifics accordingly.

Only allow specific dates, The two available options limit dates to either specific days of the week, or can be filtered to a custom set of days using JavaScript.

Use JavaScript to determine if the given date, of type Date, should be allowed to be selected by returning true/false. If needed, a second argument field, of type LFForm Identification, is provided to give the context of which the field or row index the function is being run.

Examples of custom day selection using JavaScript:

Allow only week 1 or 3 of any month

const useExact = true;
const month = date.getMonth();
const year = date.getFullYear();
const firstWeekday = new Date(year, month, 1).getDay();
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
const offsetDate = date.getDate() + firstWeekday - 1;
const index = 1; // start index at 0 or 1, your choice
const weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7);
const week = index + Math.floor(offsetDate / 7);
let weekOfMonth;
if (useExact || week < 2 + index) weekOfMonth = week;
	else weekOfMonth = week === weeksInMonth ? index + 5 : week;
return weekOfMonth === 1 || weekOfMonth === 3;

Allow only week 1 or 3 of any month using a shared function.

In the form JavaScript panel, add the shared function:

window.getWeekOfMonth = function (date, useExact = true) {
	const month = date.getMonth();
	const year = date.getFullYear();
	const firstWeekday = new Date(year, month, 1).getDay();
	const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
	const offsetDate = date.getDate() + firstWeekday - 1;
	const index = 1; // start index at 0 or 1, your choice
	const weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7);
	const week = index + Math.floor(offsetDate / 7);
    
	if (useExact || week < 2 + index) return week;
		return week === weeksInMonth ? index + 5 : week;
}

On your date field(s) add the following:

const weekOfMonth = getWeekOfMonth(date, true);
	return weekOfMonth === 1 || weekOfMonth === 3;

Only 1st or 15th of any month

const dayOfMonth = date.getDate();
	return dayOfMonth === 1 || dayOfMonth === 15;

Use a custom error message (Only in current week)

const todayObj = new Date();
const todayDate = todayObj.getDate();
const todayDay = todayObj.getDay();

// get first date of week
const firstDayOfWeek = new Date(todayObj.setDate(todayDate - todayDay));

// get last date of week
const lastDayOfWeek = new Date(firstDayOfWeek);
lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);

// if date is equal or within the first and last dates of the week
const allowed = date >= firstDayOfWeek && date <= lastDayOfWeek;
return { allowed, errorMessage: "Date must be within this week" };

Use a third party library for more complex date calculations

Note: No date library is included in the form sandbox by default. You may use any date library, but the preferred library is date-fns.

Add the external script file to the External tab of the JavaScript panel:

https://cdn.jsdelivr.net/npm/date-fns@3/cdn.min.js

Use the global object in your date fields:

const anyDateObj = LFForm.getFieldValues({ fieldId: 10 }).dateTimeObj;
const anyDate = dateFns.toDate(anyDateObj);
if (dateFns.isDate(anyDate) === false) return {
	allowed: false,
	errorMessage: 'Please select Any Date first'
};
return dateFns.differenceInBusinessDays(date, anyDate) <= 10;

Do not allow previously chosen dates within a collection or table

// use the field argument passed to the function to locate all field values
const dateValues = LFForm.getFieldValues({
	fieldId: field.fieldId
});
const dateAsArray = Array.isArray(dateValues) ? dateValues : [dateValues];
/** return true if date is unique across any field in the column
** excluding the date field being used **/
return dateAsArray
.filter((d, idx) => idx !== field.index && d.dateTimeObj !== null &&
new Date(d.dateTimeObj).getTime() === date.getTime()
).length === 0;

Under Tooltip, specify the help text that will appear when users hover over the field. Click the Insert variables button to insert a variable into the text.
Under CSS class, specify a CSS class to assign this field.

Your changes will be saved automatically.

Note: The labels, tooltip, text above, and text below settings in the form designer support the use of simple HTML markup for formatting purposes.

Editing a Date and Time Field in the Classic Form Designer

To edit a date or time field

Select the field on the canvas and click Edit.
Under Field label, enter the field label that will appear next to the field on the form.
Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
Under Field options, select Required if users must fill in this field before submitting the form. Select Read-only if users should not be allowed to modify this field. For date fields, select Show time to allow users to specify a time along with the calendar date.