componentes
datepicker
DatePicker é um campo para coletar, editar ou visualizar datas.
índice
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
singleDate | Should have just one date | false | false | boolean |
clearLabel | Clear button label | false | clear dates | string |
defaultValues | Default values for start and end dates | false | {
startDate: null,
endDate: null,
} | { startDate: Date; endDate: Date; } |
endDateLabel | End date label | false | until | string |
locale | Locale of the date picker | false | enUS | Locale |
maxBookingDays | Maximum number of days at the range | false | 30 | number |
minBookingDate | Minimum date of the range | false | new Date('2019-01-01T03:00:00.000Z') | Date |
onChange | Change action callback | false | undefined | (data: any) => void |
onClear | Clear action callback | false | undefined | () => void |
shouldResetOnSubmit | Enable or not reset action on submit | false | false | boolean |
showSubmitButton | Enable or not submit button | false | true | boolean |
startDateLabel | Start date label | false | from | string |
submit | Submit action callback | false | undefined | (startDate: Date, endDate: Date) => void |
submitLabel | Select button label | false | select dates | string |
values | Values for start and end dates | false | {
startDate: null,
endDate: null,
} | { startDate: Date; endDate: Date; } |
inContainer | If DatePicker is rendered inside another container | false | false | boolean |
*valores gerados automaticamente.
with clear button
with dropdown
with start and end date
with values and OnChange
hide submit button
with single date
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Use os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| clearLabel | clearLabel |
| defaultValues | defaultValues |
| endDateLabel | endDateLabel |
| locale | locale |
| maxBookingDays | maxBookingDays |
| minBookingDate | minBookingDate |
| onChange | onChange |
| onClear | onClear |
| shouldResetOnSubmit | shouldResetOnSubmit |
| showSubmitButton | showSubmitButton |
| submit | submit |
| submitLabel | submitLabel |
| values | values |
| ❌ | inContainer |