Bit Form Advanced Date Time – Flexible Date & Time Field Settings

The Advanced Date Time field in Bit Form allows users to select both a date and time using a sleek and modern interface. This field is designed for scenarios where capturing both elements together is essential—such as appointment bookings, event planning, or deadline tracking.

We have integrated the popular Flatpickr JavaScript library to provide a lightweight, fast, and customizable calendar and time picker experience. This ensures smooth performance across devices and browsers, along with advanced configuration options.

To add the Advanced Date Time field to your form, open the form builder, search for “Advanced Date Time,” and either click on the field or drag and drop it into your form.

⚙ General Settings

1. Field Key

In Bit Form, every field has a special identifier known as a Field Key. This field key uniquely identifies a field, it also helps to send data via email, PDF, store database, and PHP action hook. These keys are important in Success/Error Messages, WebHooks, Redirect Pages, Email Templates, Workflows, and Integrations.

2. Name

The Name is an HTML equivalent input field’s name, you can customize it easily according to your preferences. You can easily modify it to suit your needs.

A field’s name is like a special label used when you submit a form. For example, let’s say the field name is “advanced-datetime-1-6”. In this case, ‘advanced-datetime’ tells us the type of field it is, ‘1’ refers to the form ID, and ‘6’ means it’s the fifth-number field on the form. This field name can be used for various purposes such as Fetch data from url parameter.

3. Field Label

You can set a proper name for the field that is considered a field label. This label name will appear on the front end of the form you will display. You can hide the field label if you want.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the field label. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

4. Subtitle

The subtitle is an additional piece of text that appears below the label of a field in a form. It offers further clarification or context to help visitors understand the purpose of the field.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the subtitle. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

5. Admin Label

This field is designated for administrative use and allows an administrator to set a label name that will be displayed on the responses page.

6. Size & Position

It typically refers to the dimensions and placement of an input or output field within a user interface. It specifies the width and position, x-position, and w-width of the field on the screen or page.

7. Input Icons

The input icon option allows you to include a symbol or image in the field input.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the start (leading) of the field input and the end (trailing) of the field input. It serves as a visual cues to help users understand the context of the text. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

8. Basic Configuration

Calender Mode: The Calendar Mode option in the Advanced Date Time field lets you define how users can interact with the date picker—whether they need to select a single date, a range, or multiple dates. This flexibility is ideal for forms involving scheduling, travel bookings, availability checks, and more.

Available Modes:

• Single: Allows the user to select one date only.
• Range: Enables users to select a start and end date.
• Multiple: Lets users pick more than one non-consecutive date.

View Format: The View Format setting in the Advanced Date Time field controls how the selected date and time are displayed to the user within the form. This helps ensure clarity, consistency, and alignment with your regional or business formatting standards.

Common Examples:

• Date Only Formats:
  • YYYY-MM-DD → 2025-07-13
  • DD-MM-YYYY → 13-07-2025
  • MM/DD/YYYY → 07/13/2025
• Date & Time Formats:
  • YYYY-MM-DD HH:mm → 2025-07-13 14:30
  • DD-MM-YYYY h:mm A → 13-07-2025 2:30 PM
  • MM/DD/YYYY hh:mm A → 07/13/2025 02:30 PM

Value Format: The Value Format setting defines how the selected date and time will be saved and submitted when the form is submitted. This is especially important if you’re integrating with third-party tools (like CRMs or automation platforms) that expect data in a specific format.

While View Format controls what the user sees, Value Format determines how the data is processed and passed in the backend.

Default Date: The Default Date setting allows you to pre-fill the Advanced Date Time field with a predefined date (and time), improving the user experience by reducing the need for manual input. This is especially useful for setting expected or suggested dates automatically.

You can choose from the following default date types:

Available Options:

• Current Date: Automatically sets the field to the current date and time when the form loads.
• Static: Set a fixed date and time (e.g., 2025-07-15 10:00 AM) that doesn’t change.
• Dynamic: Set the default date using a relative value such as “+1 day,” “+7 days,” or “-3 hours” from the current time.

Minimum Date: The Minimum Date setting lets you define the earliest date and time a user can select in the Advanced Date Time field. This is useful for preventing past date selection, setting booking rules, or enforcing lead times.

Available Options:

• Current Date: Users can only select today or future dates. Past dates will be disabled.
• Static: Set a specific fixed date and time (e.g., 2025-08-01 09:00 AM) as the earliest selectable value.
• Dynamic: Set a relative minimum value such as +1 day, +48 hours, or +3 weeks from the current time.

Maximum Date: The Maximum Date setting allows you to define the latest date and time a user can select using the Advanced Date Time field. This is helpful when you want to limit how far into the future (or past) a user can choose a date—for example, setting a booking cutoff or limiting availability.

Available Options:

• Current Date: Restricts users from selecting any date after today.
• Static: Define a specific, fixed maximum date and time (e.g., 2025-12-31 11:59 PM).
• Dynamic: Set a relative maximum value from the current date/time (e.g., +7 days, +1 month, -2 hours).

Allow Input: The Allow Input setting controls whether users can manually type the date and time into the field, in addition to using the calendar/time picker. This option gives more flexibility to users who prefer keyboard input or need to paste values directly.

Enable Time: The Enable Time setting determines whether the time picker is included along with the calendar in the Advanced Date Time field. This is useful when you need users to select not just a date, but also a specific time—such as for appointments, reservations, or time-sensitive events.

Hide Calender: The Hide Calendar option allows you to disable the calendar interface, making only the time picker visible to the user. This is useful when your form only needs to capture time, without any date selection—such as for time slots, availability hours, or shift scheduling.

9. Advanced Configuration

The Advanced Configuration option gives you full control over the behavior and appearance of the Advanced Date Time field using custom settings. This is ideal for advanced users who want to implement more specific use cases beyond the standard field options.

Under this setting, you’ll find a code editor where you can directly pass configuration options to the Flatpickr library that powers this field.

How It Works:

You can write custom JSON settings inside the editor to override or extend the default behavior. These settings follow Flatpickr’s official API.

Example Configuration:

{
  "disable": [
    function(date) {
      // disable every multiple of 8
      return !(date.getDate() % 8);
    }
  ],
  "locale": {
    "firstDayOfWeek": 1
  }
}

Copy

Explanation of the Example:

• "disable": This uses a custom function to disable all dates where the day of the month is a multiple of 8 (like the 8th, 16th, 24th, etc.).
• "locale.firstDayOfWeek": 1: Sets Monday as the first day of the week in the calendar view (instead of Sunday, which is default in many locales).

💡 Need Inspiration?

Visit the official Flatpickr Examples page to explore all available options:
👉 https://flatpickr.js.org/examples/

10. Placeholder

A Placeholder is a property by which the user can understand the usage of the field. Any text entered on the placeholder will be displayed on the fields. The placeholder text will disappear when the user starts writing on the field.

11. Helper Text​

It offers further clarification or context to help visitors understand the purpose of the field. This option allows you to guide your user on what kind of information should be entered, any restrictions on the input, and any formatting requirements.

Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the helper text. It serves as a visual cues to help users understand the context of the text. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.

12. Required

The Required Field option allows you to make a form field mandatory for the user to fill out. You can also specify an error message to be displayed if the field is left blank. With the “Custom Error Message” option, you have the flexibility to customize the error message according to your needs. Additionally, you can add Leading and Trailing Icons to the error message for better visual representation.

• Adding Leading and Trailing Icons: The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the error message. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.
• Asterisk Position: The asterisk symbol position indicating a required field can be set with this option. You can choose to display it before or after the field label and on the right or left side of the field.

13. Disabled

The disables field option disables user input and interaction, ensuring the accuracy and integrity of form data by preventing the visitor from entering or changing any information in the form.

14. Hidden

This option allows you to make the field hidden when the form is displayed on the front end.