Selective Day Picker
Introducing the Selective Day Picker, a fully customizable, modern date selector designed for web applications that require specific day selection. With a clean, user-friendly interface, this date picker is perfect for scenarios where you want to limit the days available for selection, such as scheduling or bookings on specific days of the week.
Key Features
Day Restriction: Activate only specific days of the week (e.g., allow Sunday and Saturday while disabling weekdays).
Customizable Look: Adjust colors for borders, background, input text, and placeholder. Tailor padding, border radius, and font styles to fit your design.
Dynamic Month Navigation: Easily navigate between months with a built-in previous and next button.
Click Outside to Close: Automatically close the date picker when the user clicks outside of it for a seamless user experience.
Native Framer: It works with native Framer form to submit and capture in your form fields.
How you can use it
Event Scheduling: Perfect for platforms that organize events only on specific days, such as weekend classes, workshops, or concerts. This date picker ensures users only choose valid dates based on available event days.
Appointment Booking: Ideal for services that are available only on certain days of the week, like salons, medical appointments, or consultations. Restricting days prevents incorrect bookings.
Restaurant Reservations: For restaurants that have special brunches or events on specific days (like Sundays), this date picker ensures customers can only reserve tables on allowed days.
Delivery Date Selection: E-commerce or grocery delivery services that offer deliveries only on weekends can use this date picker to allow customers to select available delivery dates easily.
Employee Shift Scheduling: Businesses can use this for staff to select available workdays, such as assigning shifts on weekends or weekdays.
Customizeable properties
Field Name: Customize the name attribute for the date picker field
Required: Set whether the date field must be filled by the user.
Font Style: Adjust the font family, size, line height, and weight to match your design preferences.
Background Color: Change the background color of the date input field.
Border Color: Set the color of the border around the date input.
Border Radius: Control how rounded the corners of the date picker input field are.
Padding: Adjust the spacing inside the date input field for comfort and readability.
Placeholder Text Color: Customize the color of the placeholder text that appears before a date is selected.
Input Text Color: Change the color of the text entered into the date input.
Focus Border Color: Define the border color when the date input is clicked or focused on.
Active Sunday to Active Saturday: Enable or disable specific days of the week (e.g., allow only weekends or disable certain weekdays).