Date picker

Componentes de data permitem que o usuário faça uma seleção específica através de um calendário. Por padrão, o calendário apresenta sempre o mês ou ano atual. Caso já tenha uma data inserida, o calendário apresenta o mês ou ano referente à esta data.

Boas práticas

O campo deve permitir que o usuário também insira o valor através de input do teclado.
O campo deve ter apenas um tipo de entrada, e não deve ser divido em campos para cada informação (dia, mês, ano).

Date Range Picker

Utilize quando a data selecionada for próxima à data atual ou com um período menor que 1 ano.
Utilize placeholder indicando o formato da entrada de dados, por exemplo: dd/mm/aaaa ou mm/dd/aa, etc.

Week Range Picker

Utilize-o caso os períodos selecionados devam começar em um domingo e terminar em um sábado.
Caso coloque um valor na prop value do Week Range Picker, ele precisa ser uma semana, por exemplo: 02/05/2021 (Domingo) a 08/05/2021 (Sábado). Caso contrário, não vai marcar corretamente. Um exemplo de entrada inválida seria: 03/05/2021 (Segunda) a 05/05/2021 (Quarta).

Month Range Picker

Use quando o período selecionado deve ser no mínimo um mês inteiro.
Se o usuário deve selecionar um período com maior granularidade, como semanas ou dias, utilize os componentes acima.

Tipos de Date picker

Default	Quando é necessário selecionar apenas uma data.
Simples (sem calendário)	Recomendado quando o usuário conhece a data e não precisa do calendário para antecipar as datas. Normalmente utilizado em datas de validade de cartão de crédito.
Período em dias (Date Range Picker)	Utilizado para selecionar um intervalo de datas.
Período em semanas (Week Range Picker)	Utilizado para selecionar um intervalo de semanas.
Período em meses (Month Range Picker)	Utilizado para selecionar um intervalo de meses.

Default

Selected date: [none]

Birthday date

import { DateField, Text, VFlow } from '@lemonade/ui'
import React, { useState } from 'react'

function DatePickerExample() {
  const [value, setValue] = useState<Date>()

  const handleChange = (selectedDate: Date) => setValue(selectedDate)

  return (
    <VFlow>
      <Text>Selected date: {value ? value.toDateString() : '[none]'}</Text>
      <DateField label='Birthday date' name='birthday' value={value} onChange={handleChange} />
    </VFlow>
  )
}

export default DatePickerExample

Date Range Picker

Period*

until

import { DateRangePicker, DateRange } from '@lemonade/ui'
import React, { useState } from 'react'

function DateRangePickerExample() {
  const [value, setValue] = useState<DateRange>({
    startDate: new Date('2020-01-28T17:46:49.253Z'),
    endDate: new Date('2020-02-07T17:46:49.253Z'),
  })

  const handleChange = (selectedDate: DateRange) => setValue(selectedDate)

  return (
    <DateRangePicker error='' icon='calendarOutline' label='Period' onChange={handleChange} required value={value} />
  )
}

export default DateRangePickerExample

Week Range Picker

Period*

until

import { DateRangePicker, DateRange } from '@lemonade/ui'
import React, { useState } from 'react'

function WeekRangePickerExample() {
  const [value, setValue] = useState<DateRange>({
    startDate: new Date('2021-01-03T17:46:49.253Z'),
    endDate: new Date('2021-01-09T17:46:49.253Z'),
  })

  const handleChange = (selectedDate: DateRange) => setValue(selectedDate)

  return (
    <DateRangePicker
      error=''
      icon='calendarOutline'
      label='Period'
      onChange={handleChange}
      required
      value={value}
      onlyWeeks
    />
  )
}

export default WeekRangePickerExample

Month Range Picker

Month Field

until

import { DateRange, MonthRangePicker, ReferenceMonthRange } from '@lemonade/ui'
import React, { useState } from 'react'

function MonthRangePickerDefault() {
  const [value, setValue] = useState<ReferenceMonthRange>({
    start: { month: 0, year: 2021 },
    end: { month: 3, year: 2021 },
  })

  const handleChange = (selectedDate: DateRange) => {
    let start = null
    let end = null
    if (selectedDate.startDate != null) {
      start = { month: selectedDate.startDate.getMonth(), year: selectedDate.startDate.getFullYear() }
    }
    if (selectedDate.endDate != null) {
      end = { month: selectedDate.endDate.getMonth(), year: selectedDate.endDate.getFullYear() }
    }
    setValue({ start, end })
  }

  return <MonthRangePicker error='' label='Month Field' onChange={handleChange} value={value} />
}

export default MonthRangePickerDefault