Cost Calculator Builder
Item PageVideo TutorialsChangelogResources Get Started
  • Cost Calculator Builder Documentation
  • Getting Started
    • Free Version and Pro Version
    • System Requirements
    • Plugin Installation
    • License Activation
      • Upgrading the License
    • Update Billing Details and Access Invoices
    • License Utilization
    • Update The Plugin
    • Templates
    • Feature Request
  • Plugin Features
    • How to Create a Calculator
    • How to Manage Calculators
    • How to Add a Calculator to the Page
    • Calculator Appearance
    • Additional Classes
  • Cost Calculator Settings
    • Calculator Settings
      • Summary Block
      • Currency
      • Warning Texts
      • Confirmation Page
      • Order Form
      • Form Manager
      • Sticky Calculator
      • Woo Products
      • Woo Checkout
      • Payments
      • Webhooks
    • Global Settings
      • Currency (Global)
      • PDF Entries
      • Share Quote Form
      • Order Form (Global)
      • Email Template
      • Backup Settings
      • AI Formula
      • Captcha
      • Payments (Global)
      • Geolocation
  • Calculator Elements
    • General Overview
    • Text
    • Quantity
    • Validated form
    • Dropdown list
    • Image Dropdown (Pro feature)
    • Radio Select
    • Image Radio (Pro feature)
    • Switch Toggle
    • Checkbox
    • Image Checkbox (Pro feature)
    • Date Picker (Pro feature)
    • Time Picker (Pro feature)
    • Basic Slider
    • Multi Range (Pro feature)
    • File Upload (Pro feature)
      • How to Allow Additional File Types in WordPress
      • How to Increase Maximum File Upload Size in WordPress
    • HTML
    • Geolocation (Pro feature)
    • Line
    • Formula
      • AI Assistant (Pro feature)
    • Repeater (Pro feature)
    • Group Field (Pro feature)
    • Page Breaker (Pro feature)
  • Conditional System
    • Introduction
    • How to Create a Condition
    • Condition Options
    • Condition Actions
    • AND/OR Conditions
    • Condition Creating Example
  • Special Plugin Features
    • Orders
    • Discounts
    • Required Fields
    • Contact Form 7 Plugin
  • Payments
    • Settings
    • PayPal
    • Stripe
    • Razorpay
    • Cash Payment
  • Translating Cost Calculator Into a Different Language
    • Translation Basics
    • Translating Static Strings
    • Translating Calculator with WPML
    • FAQ
  • Develeoper's guide
    • Cost Calculator Hooks
      • Order Management
      • Contact Form
      • Confirmation Page
      • Email
  • Troubleshooting
    • Introduction
    • Plugin Conflicts
    • Theme Compatibility
    • Calculator is not loading
    • Cache Settings
    • Email not sending
    • Debug Logs
    • Submit a Support Ticket
  • Changelog
    • Release Notes
    • Changelog (Free Version)
    • Changelog (Pro Version)
  • Pre-built Calculators & Cases
    • Service Booking
    • Graphic Design
    • Loan Interest
    • Delivery Service
    • Renovation Company
    • Dental Services
    • Car Wash Company
    • Medical Services
    • Tuition Fees
    • Printing Services
    • Car Rental
    • Venue Rental Service
  • Advanced Topics
    • License Management
  • Stylemixthemes
    • Cost Calculator Builder WordPress Plugin
    • Themes
    • Plugins
Powered by GitBook
On this page
  • Element tab
  • Settings tab
  • Add a measuring Unit
  • How to restrict users from choosing the specific days(Examples)

Was this helpful?

  1. Calculator Elements

Date Picker (Pro feature)

PreviousImage Checkbox (Pro feature)NextTime Picker (Pro feature)

Last updated 9 months ago

Was this helpful?

With the Pro version of the Cost Calculator Plugin, users are able to add important dates and date ranges to their calculators. To use Date Picker just drag and drop it from the Elements section. Settings will be available by clicking on the element:

Element tab

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

  • Name - Title of the element.

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

  • Description - Description of the element.

  • Calendar Option - There are two types of Date picker elements, the first is with range and the second is no range.

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

Result of the date picker with range.

  • Make some days unselectable - You can choose days of the week, some periods or days from the current date 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.

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.

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

  • 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

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

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

Add a measuring 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 the symbol to

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

  • Decimal separator - select the symbol to separate fractional part

How to restrict users from choosing the 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 25 -27 December, 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 Veterenary clinic. You can set up the date picker so that users won’t be able to select all previous days, 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:

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

condition
Add a measuring unit