Date Picker (Pro feature)

With the Pro version of the Cost Calculator Plugin, users are able to add important dates and date ranges to their calculators.

Element tab

The Date Picker element has the following attributes in the Element Tab:

• Element Name - title of the field.

• Placeholder - The default input text is shown in the date picker.

• Description - brief description of the field.

• Element width - set how much horizontal space the element occupies in the form relative to the width of the calculator in 100% scale. You will see the changes in real time.

• Date range - enables users to choose the date in the form of a range (start and end dates)

• Calculate cost per day - Enable if you want to put the price for each day users choose.

With Range

Result of the date picker with a range.

No Range

• Specific Days - You can choose days of the week, some periods, or days from the current date that the user can't choose. For example, if you give consultations and don't work on Mondays and Tuesdays, you can choose these days and restrict users from picking this date.

Set Measurement Unit

This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

• Unit Symbol - enter the unit symbol

• Position - select the position where the symbol should be displayed relative to the number

• Thousands separator - select the symbol to separate thousands

• Number of decimals - indicate the number of decimals in the fractional part

• Decimal separator - select the symbol to separate the fractional part

Settings tab

The Date Picker element has the following attributes in the Settings Tab:

• Required - Enable to make a date picking a required action.

• Hidden by Default - The element will be hidden until a corresponding condition is met.

• Calculate hidden by default - If any case hides the element: via the Hidden by Default setting or hidden by some condition, the element's default value (if it is set) will be counted in the formula

• Show in Grand Total - Disable if you want to hide the element in Grand Total.

• Enable Auto-close - Date picker will close automatically when a date is selected

• Additional Classes - Add extra classes to the HTML elements to further style changes.

Show in Grand Total enabled

The result of the Date Picker element will be displayed in the total summary.

Show in Grand Total disabled

How to restrict users from choosing specific days (Examples)

1) For example, you are a dentist. And you give consultations and don't work on Mondays and Tuesdays, you can choose these days and restrict users from picking this date.

That is how it will look on the user’s page:

2) Image you have a graphic design agency. Your team has three days off from 26-29 May, so you make these days unselectable.

That is how it will look on the user’s page:

3) Let’s take an example of a Veterinary clinic. You can set up the date picker so that users won’t be able to select all previous days, the current day, and some days after the current day(the date users make an appointment and calculate).

That is how it will look on the user’s page: