Date and Time Picker
General
- Name: the name of the form component. This needs to be unique for each form. It can contain only alphanumeric chars. The name of the field is only used for internal reference - it will not be displayed in the front-end area
- Caption: the caption or label is the text or HTML that is being displayed in the actual form.
- Default value: the value will be automatically filled in when displaying the form. Inside the Default Value area you can use custom PHP code in between the //<code> and //</code> tags.
- Description: text/HTML area that provides a description of the field. This can be useful for providing explanations or indications for that particular field.
Validations
- Required: you can choose to make the calendar mandatory.
- Validation Rule: the following validation rules are available: 'Regex', 'Same Value as Other Field', 'Unique Field' and 'Unique Field per User'
- Date Modifier: used to modify another calendar(within the same form) which will inherit the minimum or maximum possible date, based on what is selected in this calendar.
- Date Offset: based on the above date modifier you can choose how many days to add or substract.
- Field Name To Compare With: available when the 'Same Value as Other Field' validation rules is enabled.
- Regex Syntax: available when the 'Regex' validation rules is enabled.
- Validation Message: here you can type your own validation message.
- Date Validation: set this to Yes if you would like to validate the date upon submission based on the current date format.
Attributes
- Date format: the format of the selected date. By default d/m/Y H:i is being used.
- Min date: the submitter will not be able to select a date below the one specified here. Custom PHP code can be used in between the //<code> and //</code> tags.
- Max date: the submitter will not be able to select a date past the one specified in this field. As in the "min date" custom PHP code can be used in between the //<code> and //</code> tags.
- Allowed Dates Regex (m/d/Y): the calendar will allow only the date(s) that match the regex syntax specified here to be selected. For example: \d{2}/25/\d{4} - this regular expression will match any month in any year but only the 25th day can be selected.
- Allowed Dates (m/d/Y): only the dates specified here will be allowed. Add one value per line. Custom PHP code can be used in between the //<code> and //</code> tags
- Disabled Dates (m/d/Y): the dates specified here will be disabled. Add one value per line. Custom PHP code can be used in between the //<code> and //</code> tags.
- Disabled Weekdays (0-6): The weekdays specified here will be disabled. Add one value per line (eg. adding 0 will disable the first day of the week). Custom PHP code can be used in between the //<code> and //</code> tags.
- Display Timepicker: Yes / No - If set to No the timepicker will be hidden.
- Minute Step: this option will allow you to set the minute intervals
- Min Time: the submitter will not be able to select an hour below the one specified here. Custom PHP code can be used in between the //<code> and //</code> tags.
- Max Time: the submitter will not be able to select an hour past the one specified in this field. As in the "min time" custom PHP code can be used in between the //<code> and //</code> tags.
- Calendar Layout: Choose between a Flat or a Popup calendar.
- Readonly: Yes / No - If set to No the submitter can type in the date (available for the calendar Popup layout).
- Popup label: if the Popup layout is being used, you can add the label of the button that triggers it.
- Allow HTML: Setting this to Yes will not escape the HTML inside the button's label. Use this if you would like to place icons inside your button.
- Theme: Light / Dark
- Additional Attributes: anything that is specified here will be reflected on the field that stores the date selection. For example: style="color:red" - this will make the color of the selected date red.
21 persons found this article helpful.
