Date and Time Fields

1. Select the field on the canvas and the options will appear in the right pane once selected.
2. Under Field label, enter the field label that will appear next to the field on the form. Click the Insert variables button to insert a variable into the label.
3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Laserfiche will automatically assign the a variable name based on the field label.
4. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert Variables button to include a variable with this text.
5. 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.

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.

6. Under Date format, specify how the date will appear using .NET formatting. This is the same formatting used to edit Workflow date tokens. Learn more.
7. 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.
8. 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.

9. 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:
  • 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 customer 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.
10. Your changes will be saved automatically.

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

1. Select the field on the canvas and click Edit.
2. Under Field label, enter the field label that will appear next to the field on the form. Click the Insert variables button to insert a variable into the label.
3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Laserfiche will automatically assign the a variable name based on the field label.
4. 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.

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.

5. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert Variables button to include a variable with this text.
6. Under Field width, specify how wide the field will appear on the page.
7. Under Date format, specify how the date will appear using .NET formatting. This is the same formatting used to edit Workflow date tokens. Learn more.
8. Under Year range, specify the range of years that the date must fall within.
9. If you are editing a time field or a date field with Show Time selected: Under Time format, specify how the time will appear.
10. Time fields only: Under Time range, specify the hours that the time must fall within.
11. Under Default value, 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.

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.

12. To configure advanced options, click the Advanced tab.
• Under Calculation, specify a formula that will populate the contents of this field. Learn more.
• 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.
13. When you are finished editing the field settings, click Done.