DatePicker

There are four kinds of picker:

  • DatePicker
  • DatePickerInput
  • DatePickerInputRange

Install

import {DatePicker, DatePickerInput, DatePickerInputRange} from '@xsolla/uikit';

Examples

Single input
Single input (with time)
Single input (with month)
Single input (with time and disabled minutes)
Single input (with time and timezone)
Single input (custom input)
Range input (with presets)
Range input (with time and timezone)
Range input (1 month)
Disabled
Different position and align
   
   
   
<DatePicker value={new Date()} />

With redux-form

const initialValue = {
  single: null
}

<Field component={DatePickerInput} name="single"/>
const initialValue = {
  range: {
    from: null,
    to: null
  }
}

<Field component={DatePickerInputRange} name="range"/>

DatePicker

API
PropertyDescriptionTypeDefault
valueinitial value for datepickerany (Date or null)null
numberOfMonthsnumber of monthsnumber1
initialMonthinitial monthDate
selectedDaysselected daysarray
disabledDaysdisabled daysobject
modifiersmodifiers objectobject
onDayMouseEntermouse enter on dayfunc
onDayClickon change dayfunc
timePickerPropsconfig for time pickerobject
positionposition of datapicker dropdown, can be set to top, bottom, rightstringtop
alignAlign dropdown menu. Can be set to top, bottom, left, rightstringleft for position top or bottom, top for position right

DatePickerInput & DatePickerInputRange

API
PropertyDescriptionTypeDefault
inputconfig for redux-form or basic datepickerobject{}
metameta for redux-form or basic datepickerobject{touched: false, error: null}
namedatepicker namestringnull
sizeinput sizestring: sm, mdmd
placeholderset the placeholder of inputstringSelect date
disabledset the disabled of inputbooleanfalse
pickMonthshow select for month and yearbooleanfalse
initialMonthinitial monthDate
selectedDaysselected daysarray
disabledDaysdisabled daysobject
modifiersmodifiers objectobject
visibleTimezonePickerenable timezone-pickerbooleanfalse
timezonestimezone arrayarray[]
monthPickerYearRangerange of years from the current yearnumber20

DatePickerInputRange

API
PropertyDescriptionTypeDefault
visibleOkButtonenable Ok buttonbooleanfalse
visibleTimePickerenable time-pickerbooleanfalse
visibleTimezonePickerenable timezone-pickerbooleanfalse
timePickerPropsconfig for time pickerobject{}
rightTimePickerPropsconfig for right time pickerobject{}
leftTimePickerPropsconfig for left time pickerobject{}
ampmTimeFormat12-hour formatbooleanfalse
timezonestimezone arrayarray[]

TimePickerProps

API
PropertyDescriptionTypeDefault
disabledMinutesdisables minutes selectorbool