Trendyol / baklava

Baklava is a design system provided by Trendyol to create a consistent UI/UX for app users.
https://baklava.design/
MIT License
1.25k stars 110 forks source link

[Component]: <bl-date-picker> #894

Open dilandoogan opened 1 month ago

dilandoogan commented 1 month ago

Figma Design Document

https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=118-3469&mode=design&t=QqSZY4PDQY4PYWXh-0

General Usage Example

No response

Rules

Attributes

Attribute Description Default Value
label(string) Datepicker input label ''
placeholder(string) Datepicker input placeholder ''
type(string) Enables to select dates single, multiple or range single
min-date(Date,string) All dates before the given date will be disabled null
max-date(Date,string) All dates after the given date will be disabled null
defaultValue (Date,Date[]) Initially selected date null
start-of-week (number) number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday 1
disabledDates (Date,Date[]) Defines disabled dates null
disabled(boolean) Defines if Datepicker disabled false
open(boolean) Defines if Datepicker is opened or closed true
allowClear Defines if Datepicker can be cleared true
formatter Defines a function to format selected dates values into a string

Events

Event Description
bl-calendar-view-open-changed Fires when calendar view opened status changed boolean
bl-datepicker-change Event will pass selected dates to the parent component Date[]
erbilnas commented 3 weeks ago

First of all, thank you for your hard work 🎉 To improve validation management, maybe we could discuss events like bl-invalid and attributes like invalid-text.