doc-burger

Calendar

A component that allows the date data entry

A calendar component allows users to select a date from a calendar view. It is commonly used for the "date" data entry and provides various customization options to tailor its appearance and behavior to your application's needs.

calendar component of Peaka

Key Features

  • Value: Calendars have a value that users can use to select a date in MM/DD/YYYY format.
  • Label: The label is the text displayed above the calendar, providing context for the date selection.
  • Hint: The hint is the text displayed below the calendar, offering additional guidance or information.
  • Placeholder: Specify a short hint that describes the expected value of the calendar input.
  • Show Today: Enable the "Show Today" switch to display the current date prominently on the calendar.
  • Range: The "Range" switch allows users to select a date range between two dates.
  • Disabled: When enabled, the "Disabled" switch makes the input text unchangeable.
  • Styles: Customize the styles of the calendar to match your application's design.

How to Use Calendars

To integrate the calendar component into your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the selected date in MM/DD/YYYY format.

  2. Label: Add a descriptive label above the calendar to provide context for date selection.

  3. Hint: Include a hint below the calendar to offer additional guidance or instructions to users.

  4. Placeholder: Optionally, specify a placeholder text to describe the expected date format or usage.

  5. Show Today: Enable the "Show Today" switch to display the current date prominently on the calendar if needed.

  6. Range Selection: If your application requires date range selection, enable the "Range" switch.

  7. Disabled State: Use the "Disabled" switch to make the calendar input unchangeable when necessary.

Use Cases

Calendars are commonly used in various scenarios, including:

  • Date selection: Allow users to select a specific date or date range for appointments, events, or reservations.
  • Booking systems: Implement calendars in booking systems to choose check-in and check-out dates for hotels or rentals.
  • Event scheduling: Enable users to pick dates for scheduling and managing events or meetings.
  • Data entry forms: Use calendars in forms for date-of-birth selection or any other date-related data input.

Calendars enhance user interactions by simplifying date selection and improving the usability of date-dependent features in your application.