Biofarma | Bind UI

Date Picker

The date picker is an input field that allows you to select dates through textual input or interaction with a calendar options overlay.

Type	Resource
Design	Figma
Mobile	Web Storybook
Code	Gitlab

DatePicker Preview

Usage

import id.co.biofarma.binduiandroid.components.datepicker.*

    var selectedDate by remember(config.initialDate) {
        mutableStateOf(config.initialDate)
      }
 
      DateInput(
          label = "Configured Date Picker",
          value = selectedDate,
          variant = TextInputVariant.OUTLINE,
          dateFormat = "dd-MM-yyyy",
          placeholder = "Select date",
          disabled = false,
          isRequired = true,
          iconPosition = IconPosition.END,
          onDateSelected = { date -> selectedDate = date },
          datePickerParams = DatePickerParams(
              confirmButtonText = "OK",
              dismissButtonText = "Cancel",
              selectableDates = when (config.dateFilter) {
                  "past" -> PresentPastSelectableDates()
                  "future" -> FutureSelectableDates()
                  "custom" -> ConfigurableSelectableDates(
                      minDate = LocalDate.now().minusDays(7),
                      maxDate = LocalDate.now().plusDays(7)
                  )
                  else -> DatePickerDefaults.AllDates
              },
          shape = config.radius?.let { RoundedCornerShape(it) } ?: RectangleShape
          )
      )

Examples

selectableDates

Use selectableDates to determine allowed date range.

DatePicker selectableDates

DateRangeInput

Use DateRangeInput to select date range.

DateRangeInput

dateFormat

Use dateFormat to determine date formatting.

DatePicker dateFormat

Props

Props	Required	Default	Type	Description
id	false	-	`String`	Unique identifier for date picker
variant	false	`TextInputVariant.OUTLINE`	`TextInputVariant`	Set variant of input
label	false	-	`String`	Set input label of date picker
value	false	-	`LocalDate?`	Used to bind value of selected date
placeholder	false	-	`String`	Set placeholer of input
helperText	false	-	`String`	Set helper text of input
errorText	false	-	`String`	Bind when date input error
disabled	false	`false`	`Boolean`	Toggle for enabling input
isError	false	`false`	`Boolean`	`true` when input is error
isRequired	false	`false`	`Boolean`	Determine if input is required
prefixAddsOn	false	-	`String`	Allows the addition of a prefix (like a currency symbol or an icon) at the beginning of the input field.
suffixAddsOn	false	`null`	`@Composable (() -> Unit)?`	Allows the addition of a suffix (like a unit or a button) at the end of the input field.
dateFormat	false	`dd/MM/yyyy`	`String`	Deterimine date formatting of input value
size	false	`ComponentSize.MD`	`ComponentSize`	Set size of input component
radius	false	`ComponentRadius.MD`	`ComponentRadius`	Set corner of input component
radius	false	`ComponentRadius.MD`	`ComponentRadius`	Set corner of input component
mode	false	`ThemeMode.LIGHT`	`ThemeMode`	Set theme to dark or light
style	false	`Modifier`	`Modifier`	Change style of component using modifier
datePickerParams	false	`DatePickerParams()`	`DatePickerParams`	Set date picker params
icon	false	`{ DefaultCalendarIcon(disabled = disabled) }`	`@Composable (() -> Unit)?`	Set icon of date picker
iconPosition	false	`IconPosition.END`	`IconPosition`	Set icon position of date picker
onDateSelected	true	-	`(LocalDate?) -> Unit`	Callback when user selected date

Checkbox Input