# DatePick Calendar Pro Plugin Documentation for Bubble
## Overview

DatePick Calendar Pro is a plugin for the Bubble platform that allows users to select dates and times in an intuitive and elegant way. Based on the Air Datepicker JavaScript library, this plugin provides a user-friendly interface for date selection in Bubble applications.

## Main Features

### Date Selection

- Single date selection
- Ability to set minimum and maximum dates
- Support for disabling specific days of the week
- Option to disable specific dates

### Visual Customization

- Different themes available (light/dark)
- Color customization (highlight color, background color, text color)
- Cell format options (square or rounded)
- Icon and button customization

### Languages ​​and Localization

- Support for multiple languages ​​(Portuguese, English, Spanish, French)
- First day of the week configuration
- Customizable date formats (DD/MM/YYYY, MM/DD/YYYY, etc.)

### Interaction and Events

- Events for value change, view change, calendar display/hide
- Date validation with customizable error messages
- Option for manual date entry

## Configuration

### Basic Settings

- **Start Date**: Sets the date that will be initially displayed in the picker
- **Language**: Sets the language in which the date picker will be displayed
- **Date Format**: Sets the format in which the date will be displayed (DD/MM/YYYY, MM/DD/YYYY, etc.)
- **First Day of the Week**: Sets which day appears first in the calendar (Sunday or Monday)

### Date Limits and Restrictions

- **Minimum Date**: The earliest date that can be selected
- **Maximum Date**: The latest date that can be selected
- **Disabled Dates**: List of dates that cannot be selected
- **Disable Days of the Week**: Options to disable specific days of the week (Sunday, Monday, etc.)

### View and Positioning

- **Standard View**: Initial view mode when opening the calendar (Days, Months, Years)
- **Minimal View**: Minimum view mode allowed in the calendar
- **Mobile Mode**: How to handle display on mobile devices
- **Auto Close**: Close the date picker after selecting a date
- **Auto Position**: Use Popper.js for date picker positioning

### Time Picker

- **Show Time Picker**: Allow users to select time along with the date
- **Time Format**: The format in which the time will be displayed
- **Minimum/Maximum Values**: Limits for hours and minutes
- **Increments**: Set increments for hours and minutes

### Visual Customization
- **Theme**: Visual theme of the datepicker (light/dark)
- **Accent Color**: The color of the selected date
- **Background Color**: The background color of the date picker
- **Text Color**: The color of the text in the date picker
- **Cell Shape**: The shape of the cells in the date picker (square or rounded)

## Exposed States

The plugin exposes the following states that can be used in workflows:

- **Selected Date**: The date currently selected in the picker
- **Selected Date Formatted**: The selected date formatted according to the defined format
- **Visibility State**: Whether the date picker is visible or hidden
- **Minimum Date**: The earliest date that can be selected
- **Maximum Date**: The latest date that can be selected
- **Last Error Message**: The last error message that occurred in the picker

## Events

The plugin provides the following events that can be used to trigger workflows:

- **Value Changed**: This event is triggered when the value is changed
- **View Changed**: This event is triggered when the value is changed triggered when the view is changed
- **Calendar Shown**: This event is triggered when the calendar is shown
- **Calendar Hidden**: This event is triggered when the calendar is hidden
- **Date Confirmed**: This event is triggered when the date is confirmed
- **Date Validation Error**: This event is triggered when a date validation error occurs
- **Reset Triggered**: This event is triggered when the reset is triggered


## Actions

The plugin offers the following actions that can be applied to the element:

- **Set Start Date**: Sets the start date of the selector
- **Set Date**: Sets the date in the selector
- **Clear Selected Dates**: Clears all selected dates
- **Show Selector**: This action is used to open the selector
- **Hide Selector**: This action is used to close the selector
- **Allow/Block Manual Input**: Allows/disallows manual input in the selector

## Common Use Cases

### Booking Forms

The plugin is ideal for booking forms where users need to select specific dates, such as hotel reservations, medical appointments or events.

### Date Filters

Can be used in search interfaces where users need to filter results by date, such as in reports or transaction histories.

### Event Scheduling

Perfect for scheduling applications where users need to select dates and times for events or meetings.

### Date Validation Forms

Useful for forms that require date validation, such as checking for minimum age or dates within a specific range.


**Demo Page**
https://nobubble-48765.bubbleapps.io/version-test/dots_table?debug_mode=true

**Editor Page**
https://bubble.io/page?id=nobubble-48765&tab=Design&name=dots_table&type=page

## Owner Name
**Gilsénio Ferreira**