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
  • What is a Time Element?
  • When Can You Use It?
  • How to Use Time Element
  • Time Element Options With and Without Range
  • Time Format
  • Time Interval

Was this helpful?

  1. Calculator Elements

Time Picker (Pro feature)

What is a Time Element?

Time element is a feature in the Cost Calculator. It allows users to choose a specific time or a range of time for providing a service or making an appointment. It is available in the Pro version of Cost Calculator. If you are using the free version, you can upgrade to the Pro version to access this element.

There are two modes available for time arrangement: basic and advanced. In the basic mode, users can select a particular time. In the advanced mode, they can choose a range of times, such as between 12 pm and 3 pm.

When Can You Use It?

You can use the Time element in many cases. Whether your website users need to schedule appointments, bookings, or services.

Some examples of use cases of the Time element for your users:

  • when selecting the time for yearbook pickup or delivery

  • when choosing the time slot for their agency service appointment

  • when scheduling a specific time for their legal consultation

  • when booking a time slot to view a property they are interested in

  • when selecting the desired time for their taxi service pickup

  • when choosing their check-in and check-out times for their hotel stay

  • when booking a table for dinner at a specific time

  • when scheduling business coaching sessions at their preferred time

  • when selecting the pick-up and return times for their car rental

How to Use Time Element

  1. Go to your calculator list. Create a new one or choose the one where you want to add the Time element.

  1. Choose Time Picker from the Elements section, and drag it to the desired position in your calculator.

  1. When you click on the element, you can put Name, Placeholder and Description. Also, you can choose a time range option and format (24-hour or 12-hour).

  1. Plus, you can set up additional parameters in the Settings Section such as making the Time field required, hiding it by default and showing it in the Total Section. You can also add additional classes to the Time element for further style changes.

  1. Save all settings and enjoy its features.

Time Element Options With and Without Range

Let’s see the Time element with and without range in examples.

For Time Element with range, we will look at making an appointment with a lawyer. The user wants to book a consultation from 12:00 to 01:30 on September 13. That’s how it will look on the user’s page:

For Time Element without range, let’s look at an example of ordering a table at a restaurant. The user wants to order a table for ten people on the terrace at 19.00 on July 27. That’s how it will look on the user’s page:

Time Format

You can set up the Time Picker element in two formats: 24-hour and 12-hour formats. That is how it'll look on the user's page:

Time Interval

You can also set time intervals for the Time picker with range. This will be the minimal time range to choose from.

For example, you can set up minimal time intervals of 45 minutes for each appointment. if your user picks 12.00 for starting an appointment, the calculator will automatically set 12.45 for ending an appointment. They can't choose 12.30 for ending the appointment, but select a range of time more than the interval, e.g. 13.00, etc.

The Time element in the Cost Calculator provides flexibility and convenience for users. So they can schedule appointments and services according to their specific time requirements.

PreviousDate Picker (Pro feature)NextBasic Slider

Last updated 9 months ago

Was this helpful?