Date picker

Date components allow the user to make a specific selection through a visual calendar. By default, the calendar always displays the current month or year. If you already have a date entered, the calendar displays the month or year for that date.

Best practices

The field must allow the user to also enter the value through keyboard input.
The field should have only one input type, and should not be divided into fields for each information (day, month, year).

Date Range Picker

Use when the date selected is close to the actual date or for a period of less than 1 year.
Use placeholders to indicate the format of the data entry, for example: dd/mm/yyyy or mm/dd/yy, etc..

Week Range Picker

Use if the selected periods must start on a Sunday and end on a Saturday.
If this component receives a date range in it's value prop, it must be a week, for example: 05/02/2021 (Sunday) to 05/08/2021 (Saturday). Otherwise, it will not be selected. An example of a invalid entry: 05/03/2021 (Monday) to 05/05/2021 (Wednesday).

Month Range Picker

Use when the selected period must be at least an entire month.
If the user should select a period with greater granularity, such as weeks or days, use the above components.

Date picker types

Default	When it's necessary to select one date.
Simple Date Picker	Recommended when the user knows the date and does not need the calendar to anticipate the dates. Usually used on credit card expiration dates.
Range Date Picker	Used to select a date range.
Range Week Picker	Used to select a week range.
Range Month Picker	Used to select a month range.

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