scc logo209 721

Date Picker & Date Range

A Complete Guide
infographics date picker

Table of Contents

3q6fCfqzz4VJL wU1A oCsn7eJLAUqUtKw

Feature Description

We're excited to introduce the latest feature for Stylish Cost Calculator: Date Picker & Date Range. The date picker displays a calendar box where customers can pick any date they want. You can also choose a date range and charge a per-day cost.

What Are Some Use Cases?

It’s great for bookings, schedules, pickup dates, general info, etc. 

Book with Ease

Let your users schedule or book your services.

Seamless Appointment

Set an appointment with your customers.

icon-Recurso 51

Flexible pricing.

Charge for a per-day cost for a range of dates.

How It Works

Adding Date Picker & Date Range Feature in Three Steps

Enable the date picker option within the calculator settings to provide a user-friendly calendar box for date selection.

Date Picker step 1

Step 1. Enable This Feature

To add a Date Picker, first click on the "+Add Element" button

Date Picker step 2

Then click on "Date Picker"

Date Picker step 3

Step 2. Settings & Options

First thing, you can add a "Title". It'll be shown on the frontend.

Date Picker step 4

You can set a default date, for example, today's date.

Date Picker step 5

Step 3. Date Type

Choose between two types of Date Picker: Single Date Picker and Date Range Picker

single date
Single Date

The single date picker allows you to select one specific date. This is useful when you need to choose a single date for an event, appointment, or deadline. Once a date is selected, the picker will close, confirming your selection.

Date Range
Date Range

Introducing the Date Range feature, designed to calculate pricing based on a specified date range. This versatile tool lets you set a daily rate for your service, providing a clear and simple pricing structure.

👉 Alternatively, you can harness the power of conditional logic to create custom pricing models tailored to the number of days the frontend user selects. Streamline your pricing strategy with this dynamic and user-friendly feature.

Date Type
pdf date picker

PDF Quote View

How to disable specific dates

How to disable specific dates

Advanced options provides increased control over how users interact with the date picker in the Stylish Cost Calculator. By customizing these settings to match your specific needs, you can create a more streamlined and user-friendly experience for your customers.

This option allows you to make weekends (Saturday and Sunday) unselectable in the date picker. This is particularly useful for businesses that do not operate during the weekend. By preventing customers from selecting these days, you can ensure that all appointments or reservations made through the calculator align with your business hours.

Disable Weekends

Similar to the Min Date option, the Max Date option sets the latest date that can be selected in the date picker. This is useful for limiting the range of selectable dates to a specific period. For example, if you are running a promotion that ends on a certain date, setting a maximum date ensures that customers cannot select dates beyond the promotion period.

 This option allows you to make weekends (Saturday and Sunday) unselectable in the date picker. This is particularly useful for businesses that do not operate during the weekend. By preventing customers from selecting these days, you can ensure that all appointments or reservations made through the calculator align with your business hours.

Min Date

This option sets a pre-selected date in the date picker when the user first sees it. It can be used to guide the user’s selection towards a preferred date, or to provide a suggested date for certain actions. By providing a default date, you can make the date selection process more user-friendly and efficient.

This option allows you to specify individual dates that cannot be selected in the date picker. This is handy for blocking off specific days that are not available for appointments or reservations, such as holidays or days when your business is closed. By disabling these dates, you can provide a more accurate representation of your availability and prevent scheduling conflicts.

Disabled Dates

Additional Information

Related Features

Quantity Box

Let users type numbers quickly with a numeric keypad
Read more >

Raw Text & HTML

Add raw text or basic HTML tags to your forms to describe sections or explain elements
Read more >

SCC logo White
Don't miss a powerful feature! 👇