componentes

datepicker

DatePicker é um campo para coletar, editar ou visualizar datas.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

singleDate

Should have just one date

falsefalseboolean

clearLabel

Clear button label

falseclear datesstring

defaultValues

Default values for start and end dates

false{ startDate: null, endDate: null, }{ startDate: Date; endDate: Date; }

endDateLabel

End date label

falseuntilstring

locale

Locale of the date picker

falseenUSLocale

maxBookingDays

Maximum number of days at the range

false30number

minBookingDate

Minimum date of the range

falsenew Date('2019-01-01T03:00:00.000Z')Date

onChange

Change action callback

falseundefined(data: any) => void

onClear

Clear action callback

falseundefined() => void

shouldResetOnSubmit

Enable or not reset action on submit

falsefalseboolean

showSubmitButton

Enable or not submit button

falsetrueboolean

startDateLabel

Start date label

falsefromstring

submit

Submit action callback

falseundefined(startDate: Date, endDate: Date) => void

submitLabel

Select button label

falseselect datesstring

values

Values for start and end dates

false{ startDate: null, endDate: null, }{ startDate: Date; endDate: Date; }

inContainer

If DatePicker is rendered inside another container

falsefalseboolean

*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

UnitedOlist Design System
clearLabelclearLabel
defaultValuesdefaultValues
endDateLabelendDateLabel
localelocale
maxBookingDaysmaxBookingDays
minBookingDateminBookingDate
onChangeonChange
onClearonClear
shouldResetOnSubmitshouldResetOnSubmit
showSubmitButtonshowSubmitButton
submitsubmit
submitLabelsubmitLabel
valuesvalues
inContainer